0

編集 - 答えを得るのに役立つ情報を追加しています。私がやっていることは、オートコンプリートを使用してアイテムをリストに追加することです。

   <section id="rightSide" class="shrinkwrap" style="float: right;margin-top:10px;width:500px;">
        <fieldset>
            <legend>Select Other Materials</legend>
            <form method="get" action="@Url.Action("CreateOtherMaterials", "DataService")"
                  data-scd-ajax="true" data-scd-target="#otherMaterialList">
                <p>Select a Material: <input type="search" name="searchOtherMaterial" id="searchOtherMaterial" data-scd-autocomplete="@Url.Action("AutocompleteOtherMaterial", "DataService")" style = "width: 300px;" class="submitOtherMaterialSelectionNew" data-scd-add-other-material="@Url.Action("AddOtherMaterialNew", "DataService")"/>
                    @Html.DialogFormButton("Add New Material", Url.Action("AddMaterial", "Popup"), "Add New Material", null, Url.Action("Create"))
                </p>
            </form>  

            @Html.Partial("_OtherMaterials", Model.SupplierMaterialList.Where(x => x.PrimaryMaterialFlag == false).ToList())

        </fieldset>
    </section>

そのため、アイテムが入力されるたびに、リストが大きくなります。問題は、スクリプトがページの最新の更新を取得しないことにあるのでしょうか? 部分ビュー _OtherMaterials は次のようになります

@model IList<SupplierMaterial>

<div id="otherMaterialList" >
    <p>These materials have now been added for this supplier</p>
    <table>
        @Html.DisplayForModel()
    </table>
</div>

これは、以下の DisplayTemplate を使用してデータ行を表示するグリッドです。

@model SupplierMaterial
<tr>
    <td>@Model.Material.MaterialName </td>
    <td>
        <form class="shrinkwrap" method="get" action="@Url.Action("RemoveOtherMaterial", "DataService")">
            <input type="button" value="Remove" class="removeItem"/>
            @Html.HiddenFor(model => model.MaterialId)
        </form>
    </td>
</tr>

フォームは他のフォームと重複しません。ユーザーがボタンをクリックすると、このコードが実行されます。

$('.removeItem').click(function () {
    alert("test");
    var $form = $(this).closest("form");
    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $tr = $(this).closest("tr");
        $tr.remove();
    });

    return false;
});

ただし、このコードではクリック イベントがキャプチャされず、その理由がわかりません

4

2 に答える 2

1

その場でページに追加された動的コンテンツを操作している場合、イベント ハンドラーのようなイベント ハンドラーは、click()動的に追加されたセレクター自体にバインドされません。

delegate()将来のコンテンツを処理できるドキュメント ロード内またはon()ドキュメント ロード内にコードを配置する必要があります。

$('body').delegate('.removeItem', 'click', function(){
var $form = $(".shrinkwrap");
var options = {
    url: $form.attr("action"),
    type: $form.attr("method"),
    data: $form.serialize()
};

$.ajax(options).done(function (data) {
    var $tr = $(this).parent("tr");
    $tr.remove();
 });
});

body応答をより速くするよりも、はるかに近いセレクターを使用できます。を使用することもできますlive('selector', function(){});が、現在は廃止されていjQuery v1.9ます。お役に立てれば。

于 2013-05-21T13:33:41.220 に答える
0

交換してみる

alert(test);

と

alert('test');

私はここであなたが立ち往生していると思うし、このようにしてみてください

$('.removeItem').click(function () {
    var $form = $(".shrinkwrap");
    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $tr = $(this).parent("tr");
        $tr.remove();
    });
});
于 2013-05-21T12:59:36.760 に答える