1

私がやろうとしていること：

jQueryを使用して、これらの新しく作成されたそれぞれの値を取得します。 <input>

  1. これは私のHTML Codeの影響を受ける部分です：

    <ul class="full_form_ul">
        <li class="full_form_ul_li" id="the_step_li">

                <button class="button" id="test_button">+[Test]</button>
                <button class="button" id="step_creation_button">+[Step]</button>

        </li> <!-- \\#the_step_li -->
</ul> <!-- \\.full_form_ul -->

  2. これは機能しているjQuery codeです：

    $("#step_creation_button").click(function(event)
{   
        event.preventDefault();
        $('#the_step_li').append('<div class="step_div"><input type="text" class="step_input"><button class="the_sub_step_button" type="button" title="button">+[Sub]</button></div>');

});

$('#the_step_li').on('click', "button", function(event) 
{

    event.preventDefault(); 
    $(this).parent('.step_div').append('<div class="sub_step_div"><input type="text" class="sub_step_input"></div>');

});

  3. 動作し ないjQuery ：code

    $("#test_button").on('click', function(event) 
{

    event.preventDefault();

    $(".step_div").each(function()
    {   


        alert($(this).next('.step_input').val());
        // ^ updated according to @Jeremy T's excellent response into...
        //alert($(this).children('.sub_step_input').val());


        $(this).children('.sub_step_div').each(function()
        {
            alert($(this).next('.sub_step_input').val());
            // same change from .next into .children here as well I would assume, though it doesn't work in this instance.  
        });

    }); // \\.step_div.each 

    //@EH_warch supplied a wonderful working solution for the initial problem as well
    //$("#the_step_li > .step_div > .step_input").each(function()
    //{
        //alert($(this).val());
    //})

}); // \\#test_button.on('click')

関連する（しかし異なる）質問：

4

3 に答える 3

2

セレクターを除いて、すべてが良さそうです$(this).next('.step_input')

内部の入力を検索する場合はthis、を使用する必要があります$(this).children('.step_input')

jsFiddleの動作：http： //jsfiddle.net/rKnDF/

于 2012-07-13T20:43:13.950 に答える
0

申し訳ありませんが、あなたのタイトルと混同しました。新しく追加された要素とは何の関係もないと思います。

これを置き換えることができます

$(".step_div").each(function()
{   
    alert($(this).next('.step_input').val());
});

にとって

$("#the_step_li > .step_div > .step_input").each(function(){
    alert($(this).val());
})

アップデート

display新しいリクエストに応じて、表示したい要素にクラスを追加するのが最善の方法です。その要素のクラスを取得して、ビジネスログインを実行できます。

$("#the_step_li .display").each(function(){
    alert($(this).val() + 'and my class is: ' + $(this).attr('class'));
})

例

于 2012-07-13T20:34:27.127 に答える
0

要素はドキュメント対応にのみバインドされ、その後に新しい要素が作成されます。動的に作成されたオブジェクトにイベントをアタッチするには、.live（）や.delegate（）などを使用する必要があります。

これが違いについての本当に良い説明です。

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

于 2012-07-13T20:35:57.283 に答える