1

この質問が何度か聞かれたことは知っていますが、私に合った答えが得られなかったので、ここで私のケースを取り上げます。特定のページに連絡先フォームを追加するjQueryプラグインを作成しようとしています(そのようなプラグインがないわけではありませんが、教育上の理由からこれを行うとしましょう)。<div id="add_contacts"></div>このdivでフォームを検索して作成します。jQuery

$(document).ready(function(){
    $('#add_contacts').append('<div class="contact-from"></div>');
    $('<form></form>',{id:'new_contact'}).appendTo('.contact-form');
    $('<div>',{class:'contact_user_name'}).appendTo('#new_contact');

var name_field = $('<input>',{
    name:"contact_broker_fullname",
    id:"contact_user_name",
}).appendTo('.contact_user_name');

    var input_button = $('<input>',{
    name:"submit",
    type:"submit",
    value:"Send"
}).appendTo('#new_contact');

    var full_name=name_filed.val();//I'm not sure that this should be here at all.

    input_button.on('click',function(){
    ajax_send_contact(full_name);
    return false;
});
});

そして、ここにajax_send_contact(full_name)関数があります：

$.ajax({
    url:'../some.php',
    type:'post',
    data:{name:full_name},
    success: function (response){
        if (response) {
            $('#success').append('<span>All right.</span>');
        }
        else{
            $('#errors').append('<span>Something went wrong.</span>');
        }
    },
    error: function () {
        $('#errors').append('<span>ERROR!</span>');
    }
});

HTML に要素を動的に追加すると、それらは DOM に含まれないことを読んだので、どうすればそれらを操作できますか。入力の値を取得する方法を教えてください。ユーザーが [送信] ボタンをクリックすると、値が ajax 関数に送信されます。そして、私はこの特定のケースだけを求めているのではなく、非常に重要なものが欠けているため、ロジック全体を求めています。

ありがとうございました。

4

2 に答える 2

2

あなたがこれをどこで読んだかはわかりませんが、それは真実ではありません。ページに要素を追加することは DOM 操作です。実際、ready 関数には多くの DOM 操作があります。DOM 操作はコストがかかります。操作をグループ化して削減するようにしてください。

var formHtml = '';

formHtml += '<div class="contact-form">';
    formHtml += '<form id="new_contact">';
        formHtml += '<div class="contact_user_name">';
            formHtml += '<input type="text" name="contact_broker_fullname" id="contact_user_name">';
        formHtml += '</div>';
        formHtml += '<input type="submit" name="submit" value="send">';
    formHtml += '</form>';
formHtml += '</div>';

$('#add_contacts').append(formHtml); // Only 1 DOM manip.

コードにエラーがあります:

$('#add_contacts').append('<div class="contact-from"></div>');
...
var name_field = $('<input>',{

その後 ：

$('<form></form>',{id:'new_contact'}).appendTo('.contact-form');
...
var full_name=name_filed.val();

'contact-from' の次に 'contact-form' です。'name_field' の次に 'name_filed' です。

コードでは、フォームを作成した直後、つまりユーザーがフォームに何かを入力する前に、input#contact_user_name の値を取得します。クリック ハンドラでこれを行う必要があります。

于 2013-09-01T16:45:00.373 に答える