0

最初静态添加元素，如下所示：

<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;

            }

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

4

3 回答 3

1

.live()是你想要的，但它已经贬值了，你现在需要使用.on()

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

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

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

编辑：

这是一个例子。单击按钮添加一个div然后单击div以获取其内容。

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

于 2013-07-10T17:51:31.107 回答
0

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

现场演示

$("#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 几乎没有问题

  1. 您的 html 以 td 而不是 table 开头
  2. 您没有用引号括起 id
  3. 您将相同的 id 分配给多个元素，而不是分配一个公共类并使用它。

现场演示，这里的问题不是动态元素而是错误的 HTML / Script

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。

现场演示

$(document).on("click", "#checkbox_div input:checkbox", function(){
    var division = "[id=" + $(this).attr('name') + "_div]";
    $(division).show();
});
于 2013-07-10T17:16:34.160 回答
0

中的值id是在当前上下文中。我已经把它放在单引号中并且它工作正常。+ id +idundefined

更新：您id comment_div对静态和动态内容使用相同的内容，id在DOM. 对多个元素使用class而不是id

更新了 jsFiddle

于 2013-07-10T17:47:21.810 回答