Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts

    Question Detect anchor click

    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()

    Code:
    $('.remLink a').each(function(e){
      e.preventDefault();
      $(this).click(function(){
        $('#chgWarning').html("Changes to this record have not been saved");
      });
    });
    Code:
    $('.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,
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    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.
    Last edited by VIPStephan; 10-23-2012 at 09:48 PM.

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    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.

    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>
    Code:
    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.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    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.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Quote Originally Posted by WolfShade View Post
    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?
    Code:
    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>', {
        
    hrefblabla,
        
    textNAME,
        
    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
    Code:
    <div id="container">
      <div id="example">
        <a href="http://example.com">whatever</a>
      </div>
    </div>

  • Users who have thanked VIPStephan for this post:

    WolfShade (10-24-2012)

  • #6
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I'll give that a shot. Thank you.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #7
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I had to play around with it, a bit, but I finally got it to do what I want.

    Thanks, again, VIPStephan!
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •