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?

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?

• javascript
• jquery
• ajax
• jquery-events

3 Answers 3

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 es 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 remended 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;
              });
          }
    });

"bookmark_remove("+bookmark_id+"), return false;"

The ma is wrong. it should be a semicolon.

Since you are using jQuery, instead of:

$('.a_bookmark').attr("onClick","bookmark_remove("+bookmark_id+"), return false;");

I suggest you use this form:

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

more readable with less quotes tokens, right?