On click not working for dynamically added link id attribute

Question

I have a link and on page load I am dynamically adding an "id" , the link say logoff.

On clicking logoff link I need to perform an ajax. I was able to add id but on click is not working.

Below is my code:

$(document).ready(function(){
    $('ul#main-navigation li').each(function(index) {
        var text =  jQuery.trim($(this).text());
        if (text == "Log Off") {
            $(this).children().attr('id',"log_out_link");
        }
    });
});
$(document.body).on('click', '#log_out_link', function(e){
    e.preventDefault();
    alert("edsddd");
    return false;
});

Any help is appreciated.

ANSWER:

$(document).ready(function(){
    $('ul#main-navigation li').each(function(index) {
        var text =  jQuery.trim($(this).text());
        if (text == "Log Off") {
            $(this).children().attr('id',"log_out_link");
            // onclick staff here
            $('#log_out_link').on('click', function(e){
                e.preventDefault();
                alert("edsddd");
                return false;
            });
        }
   });
});

Answer 1

You're getting a text-content of an li which cntains other nodes (result is text of li + its child nodes so will never be equals to "Log Off" ) ,

you can get the text of the node by cloning it removing its children and get its text only , si your if statement here will work correctly

$(this).clone().children().remove().end().text()

Also it's incorrect to set same ids for multiple nodes ( children of li node ) so use class instead :

See below snippet :

 $(document).ready(function() { $('ul#main-navigation li').each(function(index) { var text =jQuery.trim($(this).clone().children().remove().end().text()); console.log(text); if (text == "Log Off") { $(this).children().attr('class', "log_out_link"); } }); }); $(document.body).on('click', '.log_out_link', function(e) { e.preventDefault(); alert("edsddd"); return false; }); 

 p.log_out_link { color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="main-navigation"> <li>Log On</li> <li>Log In<p><a>text</a></p><p><a>text</a></p></li> <li>Log Off <p><a>text</a></p><p><a>text</a></p></li> <li>Log Out<p><a>text</a></p><p><a>text</a></p></li> </ul> 

Answer 2

its because you are adding the id after the document is ready and then adding a listener to that id from the preloaded document .

try using

$(document).ready(function()
            {
              $('ul#main-navigation li').each(function(index) {
                 var text =  jQuery.trim($(this).text());
                 if (text == "Log Off") {
                     $(this).children().attr('id',"log_out_link");
                 }
              });
            });
            $('#log_out_link').on('click', function(e){
                e.preventDefault();
                alert("edsddd");
            });

Answer 3

Try this. jQuery find DOM where it will be added.

$(document).ready(function(){
    $('ul#main-navigation li').each(function(index) {
        var text =  jQuery.trim($(this).text());
        if (text == "Log Off") {
            $(this).children().attr('id',"log_out_link");
            // onclick staff here
            $('#log_out_link').on('click', function(e){
                e.preventDefault();
                alert("edsddd");
                return false;
            });
        }
   });
});