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.
});

selectorwithにdocument を使用する.onと、イベントを動的に作成された要素にバインドできます。これは、実行前にDOM要素が存在しない場合に私が見つけた唯一の方法です。

これは、ソート可能でうまく機能する動的に作成されたテーブルで行います。

編集：

ここに例があります。ボタンをクリックして を追加し、divをクリックしdivてコンテンツを取得します。

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

于 2013-07-10T17:51:31.107 に答える
0

またquotes、それらが に追加される前にそれらにアクセスしようとすることを確認して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で始まります
  2. ID を引用符で囲みません
  3. 同じ 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 を修正します。

ライブデモ

$(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 に答える