如何在jquery中使用关键字on

how to use the keyword on in jquery

本文关键字：关键字 on jquery      更新时间：2023-09-26

我有以下html 

<li class = "item" data-id="0">Test<p>Test</p></li>

li不会自动添加到页面中。它是使用ajax生成的。当有人点击一个li时，我如何激发点击事件?我明白我必须使用"on"关键字。我试过了，但没有用。如何使用on关键字来更改li中最近的p的值?

这是我的

    $(document).on("click", ".item", function(e){
        var target = e.target;
        console.log(target);
        var id = $(e).dataset.id;
        console.log(id);
        var mark = $(e).closest('p');
        IssueViewer.showItem(id, mark);
    });

在点击处理程序中，使用$(this).find('p')来瞄准p元素，使用$(this).data('id')来点击li的data-id:

$(document).on("click", ".item", function() {
  var id= $(this).data('id');
  
  $(this).find('p').text('Changed: '+id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item" data-id="0">Test<p>Test</p></li>
</ul>

你可以试试这个。我在里面用注释包含了解释:

$(document).ready(function(){ /* PREPARE THE SCRIPT */
  $(".item").click(function(){ /* WHEN AN LI WITH A CLASS OF ITEM IS CLICKED */
    var elem = $(this); /* THE CLICKED ELEMENT */
    var etarget = elem.target; /* GET THE HTML ELEMENT */
    console.log(etarget); /* PRINT TO THE CONSOLE THE ELEMENT THAT WAS CLICKED */
    var id = elem.attr("data-id"); /* GET THE ID OF THE CLICKED LI */
    console.log(id); /* PRINT TO THE CONSOLE THE ID OF THE CLICK LI */
    elem.find("p").html(id); /* CHANGE THE CONTENT OF THE P CHILD */
  });
});

你也可以检查这个JSFiddle

相关文章：