0

Jquery .click イベントは最初のボタンのみをトリガーします! データをループして、HTML ページのそれぞれにボタンを追加し、各ボタンをクリックするとダイアログ ボックスがトリガーされるようにしたいと考えています。しかし、最初のボタンだけが機能します。残りはクリックイベントがないようです。

$(document).ready(function () {

$("#btn_comment").click(function () {

    $("#createComment").dialog(
                            {
                                modal: true,
                                height: 300,
                                width: 500,
                                buttons: {
                                    "Create a Comment": function () {
                                    var post_id = $(this).parent().attr("id");
                                    var desc_to_create = $("#txtComment").val();
                                    $.post("CreateComment", { "id": "", "username": "x", "post_id": post_id, "description": desc_to_create, "created": "" }, function (t) {

                                            alert("Thank you! Your comment has been updated!!");
                                            location.reload();

                                        })


                                    },
                                    "Cancel": function () {
                                        $(this).dialog("close");
                                    }
                                }
                            }
                            );
})

})

    <tr id='<%= Html.Encode(item.id) %>'>
        <td>

            <%: Html.ActionLink("Details", "Details", New With {.id = item.id})%> |
              <a href="javascript://" class="delete_btn">Delete</a>

        </td>
      <%--  <td>
            <%: item.id %>
        </td>
        <td>
            <%: item.username %>
        </td>
        <td>
            <%: item.title %>
        </td>--%>
        <td>
            <%: item.description %>
        </td>
        <td>
            <input id="btn_comment" type="button" value="Add a Comment" />
        </td>
        <td>
            <div id="new_comment"></div></td>
    </tr>

<% Next%>
4

1 に答える 1

2

HTML マークアップが無効です。これをループに入れます：

<input id="btn_comment" type="button" value="Add a Comment" />

ただし、HTML ではid値が一意である必要があります。あなたが見ている動作 (最初に一致する要素のみを見つける jQuery) は、未定義であるため、ブラウザー固有のものだと思います。

要素が一意でない場合、これを解決するための最短パスは、おそらく のclass代わりにを使用することidです。このようなもの：

<input class="btn_comment" type="button" value="Add a Comment" />

次に、jQuery セレクターは次のようになります。

$('.btn_comment')

これにより、一致するすべての要素が選択されます。

当然、これは、それを他の目的で使用していないことを前提としていidます。(もしそうなら、マークアップが無効なので、とにかくそのロジックを作り直したくなるでしょう。)

于 2012-05-14T00:44:06.800 に答える