无法使用 JQuery 按 ID 在 Datalist 中找到元素答案

【问题标题】：Could not find element inside Datalist by ID with JQuery无法使用 JQuery 按 ID 在 Datalist 中找到元素
【发布时间】：2010-12-02 12:17:20
【问题描述】：

下面是渲染的数据列表。似乎 $('#ctl00_ContentPlaceHolder1_ShowListing_DataList1$3$0$enquire').click(function() { ... } 不起作用，因为当我单击其中一个按钮（在 DataList 上）时旨在触发此功能，没有任何反应。

如何使用 JQuery 按 ID 查找按钮？所以基本上，如果单击 DataList 上的任何这些按钮，则应该触发该功能。

谢谢。

    <table id="ctl00_ContentPlaceHolder1_ShowListing_DataList1" class="DataWebControlStyle"
        style="visibility: visible;">
        <tbody>
            <tr>
                <td class="RowStyle">
                    <div class="ListItemContainer">
                        <div class="EnquireButton">
                            <a class="activator" id="ctl00_ContentPlaceHolder1_ShowListing_DataList1$3$1$enquire">
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="RowStyle">
                    <div class="ListItemContainer">
                        <div class="EnquireButton">
                            <a class="activator" id="ctl00_ContentPlaceHolder1_ShowListing_DataList1$3$1$enquire">
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">
        $(function() {
            $('#ctl00_ContentPlaceHolder1_ShowListing_DataList1$3$0$enquire').click(function() {
                $('#enquireOverlay').fadeIn('fast', function() {
                    $('#box').animate({ 'top': '160px' }, 500);
                });
            });
            $('#boxclose').click(function() {
                $('#box').animate({ 'top': '-200px' }, 500, function() {
                    $('#enquireOverlay').fadeOut('fast');
                });
            });
        });
    </script>

【问题讨论】：

ID 在 HTML 属性中必须是唯一的。
感谢金和尼克。最后是一个混合体.. $('a.activator').live("click", function() { ... }

标签： jquery triggers jquery-selectors datalist

【解决方案1】：

你应该使用live。

  $("#boxclose").live("click", function() {
                    $('#box').animate({ 'top': '-200px' }, 500, function() {
                        $('#enquireOverlay').fadeOut('fast');
                    });
                });

【讨论】：

【解决方案2】：

只是不要使用 ID，使用他们已经拥有的方便的class：

$('a.activator').click(function() {
    $('#enquireOverlay').fadeIn('fast', function() {
        $('#box').animate({ 'top': '160px' }, 500);
    });
});

.delegate() 甚至更好：

$(".DataWebControlStyle").delegate(".activator", "click", function() {
    $('#enquireOverlay').fadeIn('fast', function() {
        $('#box').animate({ 'top': '160px' }, 500);
    });
});

这两种方法中的任何一种都可以精简您的代码，并允许您将其移动到用户可以缓存的外部文件中。

【讨论】：