Question

我无法看到我的代码出了什么问题。我正在尝试选择列表项，但它们似乎没有被选中。

这是我的HTML

    <!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tasklistr</title>
    <style type="text/css"> @import url(styles.css);</style>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></script>
    <script type="text/javascript" src="application.js"></script>
</head>

<body>
  <h1>JSTasker</h1>

  <form>
    <fieldset>
      <legend>Add a Task</legend>
      <input type='text' name='task_text' id='task_text' />
      <input type='submit' name='add_button' value='Add' id='add_button' />
    </fieldset>
  </form>

  <div id='tasks'>
      <h2>Your Tasks </h2>
      <ul>
      </ul>
  </div>
</body>
</html>

我的application.js

$(document).ready(function() {
    $('input#add_button').click(function(event) {
        event.preventDefault();
        var task_text = $('input#task_text').val();
        var task_item = "<li><p>" + task_text + "</p></li>"
        $('div#tasks ul').append(task_item);
        $('input#task_text').val(null);
    });

    $('input#task_text').focus();

    $('div#tasks ul li').click(function() {
        alert("Hey");
    });



});

Answer 1

您应该使用.live()代替.click()。

您当前正在将click事件绑定到绑定时不存在的DOM元素（因为您通过单击按钮添加它们）。 live()解决了这个问题：此方法绑定的事件也适用于在调用 live()后创建的元素。

示例：

$('div#tasks ul li').live('click', function(){ alert("Hey"); });

jQuery选择列表项

1 个答案: