0

我正在使用 jquery 选择菜单。selectmenue one 会在用户单击表格绑定后动态填充，并且 selectmenue one 会根据 selectmenue one 填充。

我试图对 selectmenue 使用 click 事件（因为我必须使用 ajax 从后端获取数据），但是每行中的每个 selectmenue 都会触发该事件。何我每行每个选择菜单只能触发一个事件？

<table>
   <thead>
    <tr>
        <th>
            Collection Date
        </th>
        <th>
            Facility
        </th>
        <th>
            Catagory
        </th>
        <th>
            Test
        </th>
    </tr>
</thead>
<tr>
    <td>
        May 14 1984
    </td>
    <td>
        JHH
    </td>
    <td>
        <select id="catagorySelect" name="catagorySelect">
            <option value="55327">Select All</option>
        </select>
    </td>
    <td>
        <select id="testSelect" name="testSelect">
            <option value="55327">Select All</option>
        </select>
    </td>
</tr>
<tr>
    <td>
        April 14 2006
    </td>
    <td>
        JHH
    </td>
    <td>
        <select id="catagorySelect" name="catagorySelect">
            <option value="55327">Select All</option>
        </select>
    </td>
    <td>
        <select id="testSelect" name="testSelect">
            <option value="55327">Select All</option>
        </select>
    </td>
</tr>
</table>

$('body').on('click','#catagorySelect-button',function(e){

var url = '<%= Url.Action("GetCatagoryListDropDown", "Document") %>';
var contextKey=$('select#catagorySelect').val();

 $.ajax({
        type: "POST",
        url: url,
        data: { contextKey:contextKey },
        success: function(data, textStatus, jqXHR) {
         var options = []; 
                    $.each(data, function(i, el) {
                       options.push("<option value='"+ el["Value"] +"'>"+ el["Text"] +"</option>");

                    });

                      $('select#catagorySelect').append(options.join("")).selectmenu();

                }
    });

});
4

1 回答 1

1

改变这个：

$('body').on('click','#catagorySelect-button',function(e){

对此：

$('#catagorySelect').on('click', function(e) {

这（大约）与

$('body').on('click', '#catagorySelect', function(e) {

在您的原始代码中，您将此事件处理程序附加到所有点击事件body（基本上是任何点击任何地方）并过滤#catagorySelect-button不是页面上任何位置的 ID。我的更改仅将其附加到带有 ID 的选择框#catagorySelect（第二个示例将其绑定到body并过滤#catagorySelect）。

但是，您应该使用类，而不是 ID，因为拥有同一 ID 的多个版本是无效的。在这种情况下，只需将id=属性更改为并将选择器中的class=替换为- ID 仅适用于唯一元素，并且您不应在页面上拥有超过一个。这就是课程的用途。#.

另外，为了上帝的爱，请使用拼写检查。

于 2013-07-30T19:12:20.013 回答