1

Twitterブートストラップモーダルとjqueryを使用して、そのモーダルでフォームを送信しています。AJAX 応答の後、このフォームを再度送信できません。AJAX 応答では、次の内容の HTML データを取得します。

<form action="/foo" id="UserCommentViewForm" method="post" accept-charset="utf-8">
<input name="data[UserComment][to_email]" type="text"  id="UserCommentToEmail"/>
<div class="error_notice">Enter email</div>
</form>

これはモーダルの内容です：

<div id="modal_product_share" class="modal hide fade int" style="display: none; ">
<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Info</h3>
</div>

<div class="modal-body">
    <form action="/foo" id="UserCommentViewForm" method="post" accept-charset="utf-8">
        <input name="data[UserComment][to_email]" type="text" id="UserCommentToEmail"/>
    </form> 
</div>

<div class="modal-footer">
    <a href="javascript:void(0);" class="btn btn-success" id="submit">Send</a>
    <a href="javascript:void(0);" class="btn" data-dismiss="modal">Close</a>
</div>
</div>

これは私のJSです：

function product_share()
{
var el_body = $("#modal_product_share .modal-body");
var el_form = $("#UserCommentViewForm");
this.init = function(){
$("#submit").click(function(){
    el_form.submit();
});

el_form.submit(function(event){
    event.preventDefault();
    $.post( '/products/product_share/', el_form.serialize(), function( data )
    {
    el_body.html(data);
    });
});
};

this.init();
}

ドキュメントのヘッド部分は次のとおりです。

$(document).ready(function() {
    obj_product_share = new product_share();
});

だから、これはモーダルか何かへのajax応答でフォームをバインドしないことに関係していると推測しています...

4

1 に答える 1

0

同僚のおかげで、質問に答えてもらいました。魅力のように動作します:)

function product_share(){

var obj = this;
obj.el_body = $("#modal_product_share .modal-body");
obj.button_id = '#submit';
obj.form_id = '#UserCommentViewForm';
obj.el_form = null;

obj.init = function() {

    obj.el_form = $(obj.form_id);

    $(obj.button_id).click(function(){
        obj.el_form.submit();
    });

    obj.setup_form();

};

obj.setup_form = function() {

    obj.el_form.submit(function(e){
        e.preventDefault();
        $.post( '/products/product_share/', obj.el_form.serialize(), function( data ) {
            obj.el_body.html(data);
            obj.el_form = obj.el_body.find(obj.form_id);
            obj.setup_form();
        });
    });

};

obj.init();
}
于 2012-07-24T20:02:32.253 に答える