Question

Just tried out the following approach finding that this does not work?

(Using jQuery):

function bookmark_add() {

        $.ajax({
          type: "POST",
          url: "load.php",
          data: data,
          success: function(msg) {
              var msg_array=msg.split("-");
              var success=msg_array[0];
              var bookmark_id=msg_array[1];

              if(success==1) {
                  $('.btn_bookmark').html('Remove Bookmark');
                   $('.a_bookmark').attr("onClick","bookmark_remove("+bookmark_id+"), return false;");
                  }
              }
        });
    }

This function works fine. The attribute of the <a> element is being changed correctly. However, the new event (the function bookmark_remove is not being fired. So I assume that my approach does not work because of some basic misunderstanding, probably?

Could anyone tell me that this assumption is right and give any hint why?

Answer 1

I can’t immediately tell you why it’s not working (could be several things; onClick should be in all lower case for one thing — the mixed-case version is only okay in HTML markup [not XHTML, but HTML], not once you’re interacting with the DOM, which is case-sensitive), but there’s no reason at all for doing it that way. Instead:

$('.a_bookmark').click(function() {
    bookmark_remove(bookmark_id);
    return false;
});

If the anchor comes pre-equipped with an existing onclick handler, you can clear it like this:

$('.a_bookmark').attr("onclick", "");

So putting that together:

$('.a_bookmark').attr("onclick", "").click(function() {
    bookmark_remove(bookmark_id);
    return false;
});

---

Apparently people don’t understand where I’m doing that, so here’s your full ajax call with the change recommended above:

    $.ajax({
      type: "POST",
      url: "load.php",
      data: data,
      success: function(msg) {
          var msg_array=msg.split("-");
          var success=msg_array[0];
          var bookmark_id=msg_array[1];

          if(success==1) {
              $('.btn_bookmark').html('Remove Bookmark');
              $('.a_bookmark').attr("onclick", "").click(function() {
                  bookmark_remove(bookmark_id);
                  return false;
              });
          }
    });