Question

编辑：我之前看过的答案是建议使用.on。我在代码中有一个关闭按钮来删除元素。我将在哪里实现悬停功能？我尝试了2个地方并没有改变任何东西。谢谢！

我已经在这里看到了几个类似的问题并得到了解答，但是当我尝试应用它们时，它并没有起作用。我还在学习jQuery，所以很有可能我不知道自己在做什么，哈哈。

这是一个＆＃34;测试＆＃34;项目并有一定的要求。我有一个包含对象的数组，我可以从中创建页面。当您将鼠标悬停在某个条目上时，＆＃39; X＆＃39;似乎将从页面中删除它。当我使用表单添加条目时，创建悬停状态的脚本不会对其起作用，这就是我的问题。如何使用悬停功能处理加载后添加到页面的元素？

data = [
  { name: "Mark-Paul Gosselaar", photo_url: "" },
  { name: "Delta Burke", photo_url: "img/avatars/delta.png" },
  { name: "Alf", photo_url: "img/avatars/alf.png" },
  { name: "Jaleel White", photo_url: "img/avatars/jaleel.png" },
  { name: "Ralph Macchio", photo_url: "img/avatars/ralph.png" },
  { name: "Candace Cameron", photo_url: "img/avatars/candace.png" },
  { name: "Patrick Duffy", photo_url: "img/avatars/pduff.png" },
  { name: "Arnold Schwartzengger", photo_url: "img/avatars/arnold.png" }
];

这是我用来完成其余工作的脚本：

    //This function creates the rollover state on the entries so we can click the close button
    $(function(){
        $(".entry").hover(function(){
          $(this).find(".close").fadeIn();
        }
        ,function(){
            $(this).find(".close").fadeOut();
        }
       );        
    }); 


// This function puts the array onto the page     
  function personRow(data, value) {
    $("#results").prepend("<div class='entry'><div class='photo'><img src='" + value.photo_url + "'></div><div class='name'>" + value.name + "</div><div class='close'><img src='img/close.png'></div></div>");
  }

  $.each(data, personRow);


  //This function takes the form data and puts it onto the screen.
  $("#addname").submit(function() {
        personRow(0, {
        name: $("input[name='name']").val(),
        photo_url: $("input[name='photo_url']").val()
    })

    //this resets the form to be blank
    $("input[name='name']").val("");
    $("input[name='photo_url']").val("");

    return false;
    })

    //makes the close button work
    $(document).on("click", ".close", function() {
        $(this).parent().remove();
    })

感谢您提供的任何帮助！你们这些像我一样帮助你们的人很棒：）

jQuery没有处理加载后添加到页面的元素

0 个答案: