：悬停在动态添加时不起作用 <li>

问题描述 投票：0回答：3

在下面的示例中，“我是黄色”

<li>
在悬停时会变成黄色，但是当您在输入中输入内容并单击“生成文本”时，动态附加的 
<li>
在悬停时的行为会有所不同.

我尝试通过课堂选择附加的李，但仍然不起作用。似乎有一些关于附加元素的内容我没有得到。为了节省您一些时间阅读代码，我确信您只需要查看 .hover 函数即可。

    <body>
        <a href="" class="buttn btn btn-secondary">
            <div class="" style="background-color: rgb(0, 0, 0); display: inline;"> Hello</div>
        </a>
        <a href="" class="buttn2">
            <div class="btn" style="background-color: aqua; display: inline;"> Bye</div>
        </a>
        <form class="form-disable">
            <br>
            <input type="text" id="message2">
            <br>
             <button id="myButton" type="submit" disabled>Generate Text</button> 
        </form>
    
        
    
        <script src="https://code.jquery.com/jquery-3.6.0.js"
            integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
        <script src="jQueryDrills.js"></script>
    </body>

<script>    
$(".form-disable").after("<ul class='the-list'><li><h2>Im Yellow</h2></li></ul>");
    
    $("#myButton").click(function(event) {
        let theH2 = document.createElement('h2');
        let theLI = document.createElement('li');
        let $alert = $('#message2').val();
        $(theH2).text($alert);
        $(theLI).append(theH2)
        $(".the-list").append(theLI);
        event.preventDefault();
      })
    
      $(".the-list > li").hover(function(){
        $(this).css("background-color", "yellow");
      },function(){
        $(this).css("background-color", "white");
      }
    
      )
    
    $("#message2").click(function(){
        $("#myButton").removeAttr("disabled");
        // event.preventDefault();
    })
</script>
javascript html jquery
3个回答
1
投票

首次添加事件监听器时，只有 1 个 

<li>
元素，因此仅将事件监听器添加到第一个 
<li>
元素。

相反，在创建元素后专门将事件侦听器添加到元素中，如下所示：

<body>
  <a href="" class="buttn btn btn-secondary">
    <div class="" style="background-color: rgb(0, 0, 0); display: inline;"> Hello</div>
  </a>
  <a href="" class="buttn2">
    <div class="btn" style="background-color: aqua; display: inline;"> Bye</div>
  </a>
  <form class="form-disable">
    <br>
    <input type="text" id="message2">
    <br>
    <button id="myButton" type="submit" disabled>Generate Text</button>
  </form>



  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="jQueryDrills.js"></script>
</body>

<script>
  $(".form-disable").after("<ul class='the-list'><li><h2>Im Yellow</h2></li></ul>");

  $("#myButton").click(function(event) {
    let theH2 = document.createElement('h2');
    let theLI = document.createElement('li');
    let $alert = $('#message2').val();
    $(theH2).text($alert);
    $(theLI).append(theH2)
    $(".the-list").append(theLI);
    $(theLI).hover(function() {
        $(this).css("background-color", "yellow");
      }, function() {
        $(this).css("background-color", "white");
      }

    )
    event.preventDefault();
  })

  $(".the-list > li").hover(function() {
      $(this).css("background-color", "yellow");
    }, function() {
      $(this).css("background-color", "white");
    }

  )

  $("#message2").click(function() {
    $("#myButton").removeAttr("disabled");
    // event.preventDefault();
  })
</script>

使用 CSS，一切变得更加容易：

li:hover{
  background-color:yellow;
}
<body>
  <a href="" class="buttn btn btn-secondary">
    <div class="" style="background-color: rgb(0, 0, 0); display: inline;"> Hello</div>
  </a>
  <a href="" class="buttn2">
    <div class="btn" style="background-color: aqua; display: inline;"> Bye</div>
  </a>
  <form class="form-disable">
    <br>
    <input type="text" id="message2">
    <br>
    <button id="myButton" type="submit" disabled>Generate Text</button>
  </form>



  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="jQueryDrills.js"></script>
</body>

<script>
  $(".form-disable").after("<ul class='the-list'><li><h2>Im Yellow</h2></li></ul>");

  $("#myButton").click(function(event) {
    let theH2 = document.createElement('h2');
    let theLI = document.createElement('li');
    let $alert = $('#message2').val();
    $(theH2).text($alert);
    $(theLI).append(theH2)
    $(".the-list").append(theLI);
    event.preventDefault();
  })


  $("#message2").click(function() {
    $("#myButton").removeAttr("disabled");
    // event.preventDefault();
  })
</script>

0
投票

你可以这样做！

$(document).on("mouseover", ".your-dynamic-class", function() { //your hover in function });

$(document).on("mouseleave", ".your-dynamic-class", function() { //your hover out function });
-1
投票

$(".the-list > li")
选择器查找页面上已有的元素。如果您希望定位动态创建的元素，那么您需要首先定位您知道页面上的元素，然后定位动态生成的元素并使用 JQuery on 方法附加事件类型，从而将其分解。

$(".the-list").on("click", "li", function(){

// do whatever here.

})
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.