Div無法響應jQuery功能

當用戶第一次加載頁面時，我有一堆產品會被加載（附加到頁面）到頁面。我使用$ .post（）調用數據庫，然後將數據作爲div數添加到容器中。Div無法響應jQuery功能

$(function() { 

    var profile_looks = $('#profile_looks'); 

    $.post("apples.php", function(json) { 

    var looks = $.parseJSON(json); 

    profile_looks.prepend(

    (some code here) 

    ) 

    }); // close $.post()

這些產品加載後，我希望產品在懸停時更改背景顏色。

var product_tags = $('.product_tags'); 

    product_tags.mouseenter(function() { 

    $(this).css('background-color', 'white'); 

    }); 

    }); // close $(function()

但是第2步不能正常工作，這意味着當我將鼠標放置在product_tags，他們不會改變。爲什麼不是product_tags div響應函數調用？

下面

$(function() { 

     var profile_looks = $('#profile_looks'); 

     $.post("apples.php", function(json) { 

       var looks = $.parseJSON(json); 

       var page_post = ""; 

     $.post('oranges.php', function(products_data) { 

     var products_display = $.parseJSON(products_data); 


     for(i = 0; i < looks.length; i++) { 

      var fruits = products_display[i]; 

         for(var key in fruits) { 

         var test = "<div class='product_tags' style='color:" + "black" + "' >" + "<span class='type' style='font-weight:600'>" + key + "</span>" + " " + "<span class='title'>" + fruits[key] + "</span>" + "</div>"; 

          var mega = mega + test; 


}; // the 2nd for-loop finishes, and re-runs the first for-loop 

}; // b=0 timer loop finishes 


profile_looks.prepend(

      "<div class='look'>" + "<div class='look_picture_container'>" + 

      "<img src='" + "user_pictures/" + username_cookie + "/" + looks[i][0] + "'>" + 

      "<div class='heart'>" + 

      "<img src='" + "../function icons/hearticon black.png" + "'>" + 

      "<div class='heartcount'>" + 


      "</div>" + 
      "</div>" + 


      "<div class='product_tags_container' style='background-color:" + looks[i][3] + "' >" + mega + "</div>" + 

      "</div>" + // class="look_picture_container" 

      "<div class='post_description'>" + 
      looks[i][1] + 
      "</div>" + // class= "post_description" 

      "</div>"); // class="look" 

      var mega = ""; 

     } 

     }); // for the $.post(displayproducts.php) 
     }) // for the $.post(displaylooks.php) 



var product_tags = $('.product_tags'); 

    product_tags.mouseenter(function() { 

      $(this).css('background-color', 'white'); 
    }); 

    product_tags.mouseleave(function() { 

    $(this).css('background-color', 'transparent') 
    }); 


}); // end of $(function()

來源

2015-08-16 blurgoon

由於product_tags的完整代碼是動態生成的元素，你需要使用.on API來委派此類元素的事件。 .on API

使用此

profile_looks.on({ 
    mouseenter: function() { 
     $(this).css('background-color', 'white'); 
    }, 
    mouseleave: function() { 
     $(this).css('background-color', 'transparent') 
    } 
}, '.product_tags')

來源

2015-08-16 17:54:36 vinayakj

你的數據異步到達，當你創造了「懸停規則」（附加的事件處理程序）同步。

這意味着，當你寫：

var product_tags = $('.product_tags'); 
product_tags.mouseenter(function() {//...

product_tags是存在之後你發送異步POST調用元素的集合。（這些POST的答案在這一點上還沒有到達，因此您要附加的DOM也不會生成。）

要解決此問題，請在異步答案後觸發附加這些mouseenter事件處理程序（來自您用於處理返回數據的同一回調），並且您已經設置了需要使用的DOM。

注意：其他答案提出了關於通過已有的容器使用jQuery的.on()委託事件處理程序的好處，這可能被證明是更清晰，更具說明性的解決方案。

來源

2015-08-16 17:56:39 doldt

它不起作用，因爲當您嘗試將事件綁定到它們時，元素尚不存在。

您可以使用委託的事件，您綁定到現有的元素，其中的元素將結束：

profile_looks.on('mouseenter', '.product_tags', function() { 
    $(this).css('background-color', 'white'); 
}).on('mouseleave', '.product_tags', function() { 
    $(this).css('background-color', 'transparent') 
});

來源

2015-08-16 17:57:26 Guffa

Div無法響應jQuery功能

回答

相關問題