jQuery Detect anchor click

[WolfShade]

Hello, everyone.

I'm dynamically populating a div after the page loads with some anchor tags. Basically, click one or more names in a multi-select and the names are added with anchor tags around them so that they can be removed by clicking the name.

I would like to set it so that when each name is clicked, if an alert message in a particular div is blank, then the div will display "Changes to this record have not been saved."

I'm not getting the function right. I've tried several different ways, I'll include two of them below. These are all coded within the $(document).ready()

$('.remLink a').each(function(e){
  e.preventDefault();
  $(this).click(function(){
    $('#chgWarning').html("Changes to this record have not been saved");
  });
});

$('.remLink a').each(function(e){
  e.preventDefault();
  $(this).live('click',function(){
    $('#chgWarning').html("Changes to this record have not been saved");
  });
});

How does one apply an event to an anchor that doesn't exist when the page loads?

Thank you,

[VIPStephan]

First of all, live() is deprecated as of jQuery 1.7, you should use on() if you’re using a recent version of jQuery.

Then, your problem is that each() loop which, as you correctly noted, doesn’t know about the non-existing anchors yet. Therefore, you need to add the click function/event to the function that creates/appends the links in the first place. Can you show us how the div is populated with the anchors?

Edit:
Oh, it might even be simpler: just don’t use each() but on() in the first place

PHP Code:

$('.remLink a').on('click', function(e){
  e.preventDefault();
  $('#chgWarning').html("Changes to this record have not been saved");
}); 


But still, if you insist in using each() for whatever reason, you should add the click event when the anchors are created/appended as this each loop only accounts for the elements already existing.

[WolfShade]

Hi, VIPStephen.

I cannot copy/paste the code here because my dev system is isolated from the internet and I have NO way of transferring between this system and my dev. However, I will manually type most of the code.

<select id="developerName" name="developerName" multiple="multiple"> [ populated by database ] </select>
<input type="button" id="addDevelopers" name="addDevelopers" onclick="addDev(this);" /><div id="devSection"></div>

function addDev(btnObj){
  btnObj.blur();
  var v,t,thisHTML = $('#devSection').html();
  var devName = $('#developerName option:selected').map(
    function(){
      // checks to see if the name is already in the div - if yes, does nothing; if no, adds name
      return "<a href= blah blah blah blah blah > NAME </a>";
      }
    $('#devSection').html(
        $('#devSection').html("<br />" + devName + "<br />")
        );
    $('#devSection').html(
        // HERE I do a long process of split, sort, join, putting each name on a separate line and sorting alphabetically by surname
        );
    );
}

And that's it.

[WolfShade]

I tried your suggestion (using on instead of each) and put it inside (at the end) of the function that inserts the anchors into the div. Still not firing, for some reason.

[VIPStephan]

Originally Posted by WolfShade

I tried your suggestion (using on instead of each) and put it inside (at the end) of the function that inserts the anchors into the div. Still not firing, for some reason.

No, with the on() function in my edited part of the post I meant to just replace that with the current each loop set-up you have.

On the other hand: Is this where the links are created?

return "<a href= blah blah blah blah blah > NAME </a>";

If that’s the case – or generally – you should work with “regular” DOM methods rather than with innerHTML type methods. For example you can do:

PHP Code:

$('#devSection').append(
  $('<a>', {
    href: blabla,
    text: NAME,
    click: function() {
      // do whatever you wanna do on click
    }
  })
); 


Using prepend() and append() you can not only add single elements to a container, you can also add document fragments you stored in a variable, e. g.:

PHP Code:

var fragment = $('<div>', {id: 'example'}).append($('<a>', {href: 'http://example.com', text: 'whatever'}));
$('#container').append(fragment); 


will result in

<div id="container">
  <div id="example">
    <a href="http://example.com">whatever</a>
  </div>
</div>

[WolfShade]

I'll give that a shot. Thank you.

[WolfShade]

I had to play around with it, a bit, but I finally got it to do what I want.

Thanks, again, VIPStephan!