0

我试图在页面加载后添加remove()的标签上调用 jQuery 函数。div我正在添加这个div链接：

$(probablyHide).html(addedDiv);
<div class=probablyHide>
 <div onClick="myMethod(this)" class="hide" id="1">i want to hide this div 1</div>
 <div onClick="myMethod(this)" class="hide" id="2">i want to hide this div 2</div>
 <div onClick="myMethod(this)" class="hide" id="3">i want to hide this div 3</div>
</div>

但是由于某种原因，我remove()的工作不正常。

function myMethod(div)
{
    var button = $(div).closest('div.otherDiv').find("select[id^='stuff']");    
    button.val(div.id); 
    $(div).remove();
    $(button).trigger('change');
};

奇怪的是，如果我在函数中编辑以下行。该 div 将被删除。

  button.val(div.id); 
    $(button).trigger('change');
4

3 回答 3

4

如果要使用 jQuery，请使用 jQuery 事件处理程序：

$(document).on('click', '.hide', function(){
    var $div = $(this);
    var button= $div.closest('div.otherDiv').find("select[id^='stuff']"); 
    button.val(this.id); 
    $div.remove();
    $(button).trigger('change');
});

另外请尽量不要对元素使用数字 ID。

于 2013-07-18T14:46:02.497 回答
1

当您使用 onLoad 加载 JavaScript 时，它可能无法正常工作。

简单的解决方法是使用 jQuery 事件处理程序

演示：在此处输入链接描述

//$('.probablyHide').html(addedDiv);
//Use the following:
addDiv($('.probablyHide'), addedDiv);


function myMethod(div){

    var button= $(div).closest('div.otherDiv').find("select[id^='stuff']");
    button.val(div.id); 
    $(div).remove();
    $(button).trigger('change');
}

function addDiv(container, element) {
    container.append(element);
    element.click(function() {
          myMethod(this);  
    });
}

$('.probablyHide .hide').each(function() {
    $(this).click(function() {
          myMethod(this);  
    });
})

固定的 HTML：

<div class="probablyHide">
    <div class="hide" id="1"> i want to hide this div 1 </div>
    <div class="hide" id="2"> i want to hide this div 2 </div>
    <div class="hide" id="3"> i want to hide this div 3</div>
</div>
于 2013-07-18T14:55:39.477 回答
0

你的代码很好。证明：http: //jsfiddle.net/uQ9Xz/

您只需要确保三件事：

  1. myMethod当 div 生成时，您的处理程序 ( ) 需要存在。最好的方法是把它放在 中head，并确保你没有在之后创建它document.load或类似的东西。

  2. jQuery 的.closest()方法寻找包含当前元素的东西。所以需要有一个 div class="otherDiv"，它需要包含你的probablyHidediv 和一个 ID 以 开头的按钮"stuff"。你的 DOM 可能有错误的结构。

  3. button应该是按钮还是下拉列表？您将其视为按钮，但您的代码正在寻找select[id^='stuff'].

所以只需修复选择器并将您的代码放入<head>：

<script type="text/javascript">
   function myMethod(div) {    
      var button = $(div)
                      .closest('div.otherDiv')
                      .find("button[id^='stuff']"); //note the different selector

      //etc..
   }
</script>

里面<body>：

<div class="otherDiv">
    <button id="stuff">stuff</button>

    <div class="probablyHide">
        <div onClick="myMethod(this)" class="hide" id="1"> i want to hide this div 1 </div>
        <div onClick="myMethod(this)" class="hide" id="2"> i want to hide this div 2 </div>
        <div onClick="myMethod(this)" class="hide" id="3"> i want to hide this div 3</div>
    </div>
</div>
于 2013-07-18T15:17:54.207 回答