0

jquery効果のある3つのボックスと、「クリックしてJqueryボックスを作成する」をクリックすると作成される1つのボックスがあります.html（）メソッドでjqueryボックスを作成すると、新しく作成されたボックスは他のhtmlボックスのようにjquery効果を受け入れません

デモ http://jsfiddle.net/afshinprofe/f9s6X/

HTML

    <h2>Click to Add JQuery Box</h2>
<div class="box">Html Box 1</div>
<div class="box">Html Box 2</div>
<div class="box">Html Box 3</div>
<div id="res"></div>

CSS

   .box{
    width:50px;
    height:50px;
    background-color:gray;
    color:white;
    float:left;
    border:medium blue solid;
    margin:10px;
   }

JQuery

$("h2").click(function(){
    $("#res").html('<div class="box">JQuery Box 4</div>');
});
$(".box").hover(function () {
$(this).css("color","red");},
function(){
$(this).css("color","white");
});
4

4 に答える 4

3

.hover新しいボックスを呼び出す必要があります。最初に呼び出されたとき、その新しいボックスは存在しませんでした。

.onまたは、委任されたイベントを使用できます。

ただし、ユースケースが実際に質問で説明されているとおりである場合は、 CSS pseudo-classを使用:hoverしてください。

于 2012-09-22T14:08:34.247 に答える
3

hover イベントを box クラスの要素にバインドするだけで、その時点で DOM にある要素で機能します。ただし、ライブバインディングではありません。そのためには.on()を使用する必要があります。

例：

$("body").on('mouseenter', '.box', function () {
    $(this).css("color","red");
}).on('mouseleave', '.box', function(){
    $(this).css("color","white");
});

固定フィドル

于 2012-09-22T14:11:16.130 に答える
0

このようにできます :) コツは、コードを「クリック」関数内に配置することです。

$("h2").click(function(){
$("#res").html('<div class="box">JQuery Box 4</div>');

$(".box").hover(function () {
$(this).css("color","red");},
function(){
$(this).css("color","white");
});
});
于 2012-09-22T14:13:56.143 に答える
0

あなたはそれのようなものを試すことができます、

$("h2").click(function(){
    var $box = $('<div class="box">JQuery Box 4</div>')
      .hover(function () {
        $(this).css("color","red");},
      function(){
        $(this).css("color","white");
    });
    $("#res").empty().append($box);
});
于 2012-09-22T14:24:12.033 に答える