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>的文本（我更改了{的文本{1}}只是为了能够更容易地检查它是否有效。）

有趣的是，如果我手动添加"#pilot_txt"元素，一切都能正常运行，但对于从服务器加载的元素却没有。

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

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

使用事件委托

if(php_sapi_name() == 'cli') {// i got apache2handler
    $connector = new FilePrintConnector("php://stdout");
} else {
 throw new InvalidArgumentException("Argument passed to Escpos::__construct() must implement interface PrintConnector, null given.");
  }

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

3 个答案: