jquery div在td問題中刪除

我有jQuery和.remove（）的小問題。jquery div在td問題中刪除

我有一個td和在td裏面我有一個div。當我點擊td時，我想顯示div。當它可見時，我可以點擊div，點擊後將被刪除。

我用下面的JavaScript代碼：

去除工作正常，但之後我撥打一個.remove（）我不能再點擊td。什麼都沒發生。

那又怎麼了？任何幫助，感謝它！

這裏是你按一下，然後在刪除DIV後工作JSFIDDLE

來源

2015-10-23 rwur

.remove()從字面上刪除div。你應該使用的是.hide()或`.addClass（'hide'）;

來源

2015-10-23 21:56:51 CAllen

click事件仍然工作在TD上。問題是，除去，因爲在去。所以沒有什麼可以顯示的，而且當這個元素消失時，那裏不再有事件發生。

你可能想隱藏。

$("#1").on("click", function() { 
    $(this).hide(); 
});

它只是設置display:none隱藏元素，而不是永久刪除它。

這會引發您的代碼的另一個問題，即div id = 1（id建議不以數字開頭）嵌套在td元素中。所以當div上的click事件發生時，它也會傳播到td。這意味着一旦顯示了div，它就會隱藏起來，事件將傳播到td並再次顯示，防止它隱藏。這可能是你的原始問題，爲什麼刪除似乎工作。

爲了防止發生這種情況，請參加活動並致電event.stopPropagation()。 jQuery通過使用return false提供了這樣做的快捷方式（另外還有event.preventDefault（））。這看起來像這樣：

$("#1").on("click", function() { 
    $(this).hide(); 
    return false; 
});

來源

2015-10-23 21:55:57

您可以使用toggle函數，更適合閱讀代碼，並且它並不複雜。

$('td').on('click', function() { 
    $('#1').toggle(); 
});

所以，當你click TD元素上（我們使用on因爲jQuery在未來將不推薦使用短手功能），如果div#1的表現還是沒有你的要求。如果不是，則隱藏該元素。

來源

2015-10-23 22:01:53 Yair

如果你的意圖是刪除元素（不隱藏它），那麼你可能想看看.detach()函數。它會暫時從DOM中刪除該元素，並可用作參數值。

<table border="1"> 
    <tr> 
     <td>test 
      <div id="1" class="dragDiv" style="height:100px; width:100px; display:none;">Test</div> 
     </td> 
    </tr> 
</table> 

var detachedEle; 

$("td").click(function() { 
    if(detachedEle){ 
    detachedEle.appendTo("tr td"); 
     $(".dragDiv").hide(); 
     detachedEle = null; 
     return; 
    } 
     $(".dragDiv").show(); 
}); 

$("#1").on("click", function() { 
    detachedEle = $(this).detach(); 
});

http://jsfiddle.net/kz1wmajL/2/

來源

2015-10-23 22:14:58 DinoMyte

jquery div在td問題中刪除

回答

相關問題