jQuery 选择列表项

标签 jquery

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

这是我的 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");
    });



});

最佳答案

您应该使用.live()而不是.click() .

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

示例:

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

关于jQuery 选择列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5935916/

相关文章:

jquery - 获取文本框文本,javascript已更改

javascript - 交换 2 个 html 表格元素

javascript - 使用 jQuery 从字符串中删除 HTML 标签

jquery - 使用透视图时忽略 Z 索引值

javascript - 这个主干 View 如何获得它的 EL 属性集?

javascript - 使用 jquery 隐藏组件时停止组件移动

javascript - 如何设置包含属于product_category 的选项的订单

jQuery:用名称替换列表项文本值

javascript - If 语句在应该为 true 时返回 false

Jquery - 将 .each() 与变量和 IF 语句一起使用