jQuery點擊只能工作一次

我想每次點擊按鈕時創建一個圓，但是一旦點擊它，它會創建一個圓，但是當我再次點擊它時，什麼都不會發生。jQuery點擊只能工作一次

$(document).ready(function() { 
 
    var circle = $("<div class='circleClass'></div>"); 
 
    $(".t-testbody").on("click", "#clickMe", function() { 
 
    $(".t-testbody").append(circle); 
 
    }); 
 
});

.t-testbody { 
 
    margin-top: 100px; 
 
    margin-left: 50px; 
 
} 
 
.circleClass { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 100%; 
 
    background-color: blue; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="t-testbody"> 
 
    <div class="circleClass"></div> 
 
    <button id="clickMe">Button</button> 
 
</div>

來源

2015-06-19 eustass

您的觀察錯誤（但可以理解）：每次單擊按鈕時都會執行事件處理程序。至少你可以很容易地找到你自己的（例如通過在處理程序中添加斷點）。問題是你試圖一遍又一遍地追加*相同的*元素。如果追加一個已經在文檔中的元素，它將從當前位置移除並插入到新文檔中。在你的情況下，這是相同的立場，這就是爲什麼你沒有看到任何改變。 –

我現在明白了，這真的很好解釋非常感謝。 – eustass

目前已創建的元素，並將其附加到div。所以第二個append語句沒有效果，因爲元素已經存在於div中。

除了元件使用HTML字符串

var circle = "<div class='circleClass'></div>"; 
$(".t-testbody").on("click", "#clickMe", function() { 
    $(".t-testbody").append(circle); 
});

DEMO

的您可以使用.clone()

var circle = $("<div class='circleClass'></div>"); 
$(".t-testbody").on("click", "#clickMe", function() { 
    $(".t-testbody").append(circle.clone()); 
});

DEMO

來源

2015-06-19 21:33:32 Satpal

您可能想要更多地瞭解問題所在。 –

circle保存要添加的元素的引用。所以它在第一次點擊後沒有區別。

您可以創建回調函數內循環是這樣的：

$(document).ready(function(){ 
 
    $(".t-testbody").on("click","#clickMe",function(){ 
 
     var circle = $("<div class='circleClass'></div>"); 
 
     $(".t-testbody").append(circle); 
 
    }); 
 
});

.t-testbody { 
 
    margin-top: 100px; 
 
    margin-left: 50px; 
 
} 
 
.circleClass { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 100%; 
 
    background-color: blue; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="t-testbody"> 
 
    <div class="circleClass"></div> 
 
    <button id="clickMe">Button</button> 
 
</div>

演示：http://jsfiddle.net/vikashvverma/ou52j2xn/

來源

2015-06-19 21:37:54 Vikash

您要定義HTML元素只有一次，所以不是這個

$(document).ready(function() { 
    var circle = $("<div class='circleClass'></div>"); // Move this into event handler callback 
    $(".t-testbody").on("click", "#clickMe", function() { 
    $(".t-testbody").append(circle); 
    }); 
});

執行此操作：

$(document).ready(function() { 
    $(".t-testbody").on("click", "#clickMe", function() { 
    var circle = $("<div class='circleClass'></div>"); // Move this here 
    $(".t-testbody").append(circle); 
    }); 
});

發生什麼事是jQuery創建HTML元素，然後點擊它將該元素移動到div。當你再次點擊它時，它會將同一個元素移動到原來的位置，給出幻覺它什麼也沒做，但它只是將它移到了原來的位置。

當您將變量聲明移動到回調函數中時，每次單擊該元素時都會生成一個新的html元素，因此jQuery會將新定義的元素附加到div中。

來源

2015-06-19 21:44:00 Jeff

jQuery點擊只能工作一次

回答

相關問題