Question

最初静态添加元素如下：

<td valign="top" id="description_div">
    *<table class="des_box" id="comment_div">
        <tr><td class="head" id=file_comments> The function comments </td></tr> 
        <tr><td class="comment" id="test_point_comment_info"></td></tr> 
        </table>*
</td>

动态添加元素如下：

$("#description_div").append(
    '<table class="des_box1" id=comment_div><tr><td class="head" id=file_comments> The function comments </td></tr><tr><td class="comment" id=test_point_comment_info_' + id + '></td></tr> </table>')

现在，当我尝试通过其id（即“comment_div”）获取元素时...我无法检索动态创建的元素。但是能够通过使用$（“＃comment_div”）

来获取静态元素

我正在尝试对元素进行以下操作：

$("#comment_div").show();

尝试了.live（）....但是无法获取动态元素。

$("#comment_div").live().show();

复选框代码：

<li><input type="checkbox"  name="comment" />Comment</li>

尝试获取元素的实际函数：

$("#checkbox_div input:checkbox").click(function() {
var division = "#" + $(this).attr('name') + "_div";
$(division).show();
}

function SetCheckboxes(checkbox_data) {
    //SetCookie('pre_checkbox', "1111111111111111")
    var checkbox_data = GetCookie('pre_checkbox');
    if (checkbox_data == null) {
        SetCookie('pre_checkbox', "1111111111111111")
        checkbox_data = GetCookie('pre_checkbox');
    }

    checkbox_array = new Array("owner", "test_time", "bp", "single_use", "num_of_test", "pause", "clearall", "clearclass", "clearmax", "closeall", "qeinbat", "m_lint","geck","header","comment","feature");
    for ( i = 0; i < checkbox_data.length; i++) {
        var checkbox_name = checkbox_array[i];
        var value = checkbox_data[i];
        var division = "#" + checkbox_name + "_div";


        if (checkbox_name=="geck" || checkbox_name=="header" || checkbox_name== "comment" || checkbox_name=="feature"){
            console.log("entering_loop_as_expected")
            if (value == "1") {
            //alert("1");
            $("#checkbox_div input[name='" + checkbox_name + "']").attr("checked", "checked");

            $(division).show();


        } else {


            $(division).hide();
        }
                    continue;

            }

请帮我解决这个问题。谢谢！

Answer 1

.live()是您想要的，但它已被折旧，您现在需要使用.on()

$(document).on("click", "#checkbox_div input:checkbox", function(){
    //Your code here.
});

使用selector .on的文档将允许您将事件绑定到动态创建的元素。这是我在执行之前不存在DOM元素时发现的唯一方法。

我在一个动态创建的表中执行此操作，该表可以排序并且运行良好。

编辑：

这是一个例子。点击按钮添加div，然后点击div即可获取内容。

http://jsfiddle.net/FEzcC/1/

Answer 2

您错过了quotes，也确保您在添加到DOM之前尝试访问它们，例如，如果在点击按钮时添加了DOM，则它们将无法在DOM上使用。我想你忘记了id的价值，我做了一个现场演示。

<强> Live Demo

$("#checkbox_div input:checkbox").click(function() {
var division = "#" + $(this).attr('name') + "_div";    
$(division).show();
});

id=1;
$("#description_div").append('<table class="des_box1" id="comment_div"><tr><td class="head" id="file_comments"> The function comments </td></tr><tr><td class="comment" id="test_point_comment_info_' + id + '"></td></tr> </table>');

根据提供的评论和小提琴

修改。

你在演示中的html问题很少

你的html以td而不是table
您没有用引号
您正在为多个元素分配相同的ID，而是分配一个普通类和使用它。

Live Demo ，这里的问题不是动态元素，而是错误的HTML /脚本

HTML 的

<table>
    <tr>
        <td valign="top" id="description_div">
            <table class="des_box" id="comment_div1">
                <tr>
                    <td class="head" id="file_comments">The function commentszz</td>
                </tr>
                <tr>
                    <td class="comment" id="test_point_comment_info"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<div id="checkbox_div">
    <input type="checkbox" name="des" />Comment
</div>

的Javascript

$("#description_div").append(
    '<table class="des_box" id="comment_div2"><tr><td class="head" id=file_comments> The function comments </td></tr><tr><td class="comment" id=test_point_comment_info_' + 'id' + '></td></tr> </table>');

$(document).on("click", "#checkbox_div input:checkbox", function () {
    var division = "." + $(this).attr('name') + "_box";
    $(division).show();
});

如果您必须使用相同的ID而错误使用多个元素，则可以使用属性选择器。首先通过将td括在tr和table标签中来纠正html。

<强> Live Demo

$(document).on("click", "#checkbox_div input:checkbox", function(){
    var division = "[id=" + $(this).attr('name') + "_div]";
    $(division).show();
});

Answer 3

id中的+ id +值是什么，id在当前上下文中是undefined。我把它放在单引号中并且工作正常。

更新：您对静态和动态内容使用相同的id comment_div，id在DOM中应该是唯一的。对多个元素

使用class代替id

Updated jsFiddle

如何通过jquery中的ID获取动态创建的元素

3 个答案: