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及其子节点的文本，因此永远不会等于“注销”），

你可以通过克隆节点来删除它的子节点并获取它的文本来获取节点的文本，这样你的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

因为您在id准备好之后添加了document，然后从预先加载的id向document添加了一个监听器。

尝试使用

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

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

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

3 个答案: