单击时不适用于动态添加的链接ID属性

Question

我有一个链接，在页面加载时，我正在动态添加“ id”，链接说注销。

在单击注销链接时，我需要执行ajax。 我可以添加ID，但点击后无法正常工作。

下面是我的代码：

$(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;
});

任何帮助表示赞赏。

回答：

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

您将得到一个li的文本内容，该li内容包含其他节点（结果是li文本及其子节点，因此永远不会等于“ Log Off”），

您可以通过克隆除去节点的子节点并仅获得其文本来获取节点的文本， if此处的if语句将正常工作

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

同样，为多个节点（ li节点的子节点）设置相同的ID是不正确的，因此请改用class：

请参见以下代码段：

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

这是因为您要在document准备好后添加id ，然后从预加载的document向该id添加一个侦听器。

尝试使用

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

尝试这个。 jQuery在将要添加的DOM中找到DOM。

$(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;
            });
        }
   });
});