Question

将事件侦听器附加到单击三个按钮之一时创建的动态列表项元素时，我遇到了一个小问题。使用jsfiddle中的代码，我可以向两个列表添加项目，但我只能从第一个列表中删除列表项元素（ul#user）。

如果删除.first（），我可以删除两个列表中的列表项元素，但这也意味着每次添加新列表项时，附加的事件处理程序都会附加到已存在的列表项（即，我有一条警告消息而不是$(this).remove()，消息会多次出现，具体取决于它在列表中的位置以及我添加的列表项的数量。

    <script src="js/scripts.js">

        $(document).ready(function() {
          $("button#hello").click(function() {
            $("ul#user").prepend("<li>Hello!</li>");
            $("ul#webpage").prepend("<li>Why hello there!</li>");
            $("ul").children("li").first().click(function() {
              $(this).remove();
            });
          });

          $("button#goodbye").click(function() {
            $("ul#user").prepend("<li>Goodbye!</li>");
            $("ul#webpage").prepend("<li>Goodbye, dear user!</li>");
            $("ul").children("li").first().click(function() {
              $(this).remove();
            })
          });

          $("button#stop").click(function() {
            $("ul#user").prepend("<li>Stop copying me!</li>");
            $("ul#webpage").prepend("<li>Pardon me. I meant no offense.</li>");
            $("ul").children("li").first().click(function() {
              $(this).remove();
            })
          });
        });

    </script>

    <button class="btn btn-primary" id="hello">Say "hello"</button>
    <button class="btn btn-inverse" id="goodbye">Say "goodbye"</button>
    <button class="btn btn-danger" id="stop">Say "stop copying me!"</button>

    <div class="row">
      <div class="col-md-6">
        <h2>You said:</h2>
        <ul class="unstyled" id="user">

        </ul>
      </div>

      <div class="col-md-6">
        <h2>The web page said back:</h2>
        <ul class="unstyled" id="webpage">

        </ul>
      </div>
    </div>

https://jsfiddle.net/3vxf0622/

提前致谢！

Answer 1

您可以从HTML创建一个jQuery对象，为其附加一个事件监听器，然后将其添加到您的列表中。

例如：

var li = $("<li>Hello!</li>");
li.click(function(){
  // code here
});
$("#user").prepend(li);

这使您可以更好地控制新元素的事件处理程序。

Answer 2

嘿，您可以使用JQuery方法.on（）来处理添加的动态元素

检查实施的小提琴

$(document).ready(function() {
  
  $("button#hello").click(function() {
    $("ul#user").prepend("<li>Hello!</li>");
    $("ul#webpage").prepend("<li>Why hello there!</li>");    
  });

  $("button#goodbye").click(function() {
    $("ul#user").prepend("<li>Goodbye!</li>");
    $("ul#webpage").prepend("<li>Goodbye, dear user!</li>");    
  });

  $("button#stop").click(function() {
    $("ul#user").prepend("<li>Stop copying me!</li>");
    $("ul#webpage").prepend("<li>Pardon me. I meant no offense.</li>");
  });

  // This handle list elements added dynamically and won't attach event handlers multiple times 
  $("ul").on("click","li",function() {
    $(this).remove();
  });  
  
  
});

<body>
  <div class="container">
    <h1>Talk to the web page</h1>
    <p>Click a button to say something to the web page. See what it says back!</p>

    <button class="btn btn-primary" id="hello">Say "hello"</button>
    <button class="btn btn-inverse" id="goodbye">Say "goodbye"</button>
    <button class="btn btn-danger" id="stop">Say "stop copying me!"</button>

    <div class="row">
      <div class="col-md-6">
        <h2>You said:</h2>
        <ul class="unstyled" id="user">

        </ul>
      </div>

      <div class="col-md-6">
        <h2>The web page said back:</h2>
        <ul class="unstyled" id="webpage">

        </ul>
      </div>
    </div>
  </div>
</body>

https://jsfiddle.net/Satwiks/3vxf0622/1/

Answer 3

你可以尝试这段代码，我希望它会对你有所帮助.. 您可以只在父<li>上注册事件处理程序，而不是向每个<ul>注册事件处理程序。这样您就不需要为每个新动态创建的<li>注册事件处理程序...

$(document).ready(function() {
    $("button#hello").click(function() {
        $("ul#user").prepend("<li>Hello!</li>");
        $("ul#webpage").prepend("<li>Why hello there!</li>");
    });

    $("button#goodbye").click(function() {
        $("ul#user").prepend("<li>Goodbye!</li>");
        $("ul#webpage").prepend("<li>Goodbye, dear user!</li>");
    });

    $("button#stop").click(function() {
        $("ul#user").prepend("<li>Stop copying me!</li>");
        $("ul#webpage").prepend("<li>Pardon me. I meant no offense.</li>");
    });

    $('ul').click(function(event) {
        event.stopPropagation();
        $(event.target).remove();
    });
});

这是有效的Fiddle

事件处理程序没有附加

3 个答案: