Question

我所拥有的是一个包含DIV的网页，我正在动态地将一个带有选择按钮的条目列表放入其中，我为此示例简化了代码

目标DIV看起来像

<div id="targetdiv"></div>

我向服务器询问列表并构建一个类似于

的字符串

<div>
 nameofentryfromserver1
 <input type="button" class="dynamicbutton" onclick="someroutine('nameofentryfromserver1')">
</div>
<div>
 nameofentryfromserver2
 <input type="button" class="dynamicbutton" onclick="someroutine('nameofentryfromserver2')">
</div>
<div> ... same thing for next entry and so on

然后我用

将其插入到文档中

$( "#targetdiv").html( generatedstring );

现在这个工作正常，我得到了一个很好的列表，当我点击生成的按钮时，启动了正确的例程，参数正确传递，我得到了我期望的结果。

然而，当按下按钮时，我想禁用所有“dynamicbutton”类元素，一旦处理完成就重新启用它们。

在例程中我称之为

$( ".dynamicbutton").attr( "disabled", "disabled");

但这似乎并没有影响任何动态生成的内容，如果我在页面上有其他按钮属于他们被禁用的同一个类，所以看起来我只能访问最初加载的文档中的内容使用这种方法。

我甚至试过给每个按钮一个唯一的id并单独引用每个按钮但没有成功。

那么有没有一种方法来生成这个内容，以便jQuery可以通过它的正常元素选择来访问它，或者是否需要使用其他技术来操作它们？

Answer 1

您需要在将动态内容添加到页面后运行代码。如果您之前运行代码，jQuery不会看到动态内容。我会在用户按下按钮后运行代码，然后在添加动态内容后再次按下。然后在完成处理后将其删除。

您也可以使用$( ".dynamicbutton").prop( "disabled", true);

Answer 2

当事件绑定到 #target

时，您需要委托这类事件，因为元素在DOM中不可用

此外，最好使用.prop()代替.attr()

试试这个

$('body').on('click', '#targetdiv', function() {

     $(".dynamicbutton").prop( "disabled", true);

});

Answer 3

如果我使用之前未用于选择的类，那么我可以使用它来选择我动态生成的组。

因此，如果我使用class="brandspankinnewelements"生成不确定数量的输入，并且该类以前未被用作页面上任何其他元素的选择器

我现在可以选择$( ".brandspankinnewelements" )

组

这让生活变得更加简单。

Answer 4

这个怎么样？在#targetdiv之后插入脚本并尝试它是否有效。来自此处的.dynamicbutton将仅禁用id targetdiv中的所有类dynamicbutton。

<div id="targetdiv"></div>
<script type='text/javascript'>
    $('.dynamicbutton').click( function() { 
        $('#targetdiv .dynamicbutton').attr("disabled", "disabled");
    });
</script>

使用Jquery控制动态生成的HTML

4 个答案: