函数适用于普通 <li> 但不适用于脚本创建的

Question

这是一个html的站点

<!DOCTYPE html>
<html>

<head>
<title>Login Page</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="jquery.cookie.js"></script>
<link rel="stylesheet" type="text/css" href="loginStyle.css">
</head>

<body>
<div class="login">
    <input type="text" value="Please, give us your name" id="name">
    <h3 id="name_txt">Log in</h3>
    <h4 id="pilot_txt">Choose your pilot.</h4>
    <ul id="pilots">
    </ul>
</div>
<script src="loginScript.js"></script>
</body>

</html>

这里是 loginScript.js :

var uriPilots = '../api/pilots';


$("ul#pilots li").click(function(){
        var t = $(this).text();
        $.cookie("pilot", t);
        $("#pilot_txt").text(t);
    })


$(document).ready(function () {
  // Send an AJAX request
  $.getJSON(uriPilots)
      .done(function (data) {
        // On success, 'data' contains a list of products.
        $.each(data, function (key, item) {
          // Add a list item for the product.
          $('<li>', { text: formatItemProduct(item) }).appendTo('#pilots');
        });
      });
});

function formatItemProduct(item) {
  return item.Name;
}

现在，问题出在第一个函数上。它应该是，当用户单击在第二个函数中从服务器加载的 <li> 元素时，创建一个 cookie 来存储被单击的 <li> 的文本（我更改 "#pilot_txt" 只是为了能够更容易地检查它是否有效）。

有趣的是，如果我手动添加一个 <li> 元素，一切都会完美无缺，但对于从服务器加载的元素，它不会。

如有任何帮助，我将不胜感激。

Answer 1

在处理由 javascript 生成的新鲜 DOM 时，您应该使用事件委托 on() :

$('body').on('click', "ul#pilots li", function(){
    var t = $(this).text();
    $.cookie("pilot", t);
    $("#pilot_txt").text(t);
})

希望对您有所帮助。

Answer 2

您还应该将事件与该元素的父元素绑定，即在您的情况下为 ul#pilot。

$('ul#pilots').on('click', 'li', function(e) {
    var t = $(this).text();
    $.cookie("pilot", t);
    $("#pilot_txt").text(t);});

Answer 3

使用事件委托

$('body').on('click', "ul#pilots li", function () {
    var t = $(this).text(); $.cookie("pilot", t);
    ("#pilot_txt").text(t);
})

函数适用于普通 <li> 但不适用于脚本创建的

Function works for the normal <li> but doesn't work for the ones created by script

html

javascript

jquery

frontend

html-lists