jQuery选择器有问题

Question

我正在建立一个网页，其中包含有关我们公司可以执行的各种分析的信息。 我试图设置它的部分是每个分析的高级概述，然后是“更多详细信息”按钮，它会打开一个对话框，其中包含更多深入的信息。

如果我使用多行代码来显式引用每个按钮和每个对话框的ID，那么我的工作就很好。 但是，当我尝试使用选择器仅编写几行代码时，便无法正常工作。

以下是一些HTML：

<div id="van_westendorp" class="solution price1">
    <h3 class="solution_header"><a href="#">Van Westendorp</a></h3>

    <div class="solution_content">
        <ul class="overview">
            <li><em>Price:</em> 
                <div class="dollar ui-state-default ui-corner-all"><img src="images/dollar.png"></div>
                <div class="dollar ui-state-default ui-corner-all"><img src="images/dollar.png"></div>
            </li>
            <li><em>Time:</em> 3-5 days</li>
            <li><em>Pros:</em></li>
                <ul>
                    <li>Easy task for the respondent.</li>
                    <li>Prices can be open-ended.</li>
                </ul>
            <li><em>Cons:</em></li>
                <ul>
                    <li>Deliverables imply more precision than actually exists.</li>
                    <li>Heavy reliance on respondents' understanding of questions.</li>
                </ul>
        </ul>

        <div id="van_westendorp_link" class="center">
            <button class="ui-state-default ui-corner-all detail">More Details</button>
        </div>

        <div id="van_westendorp_window" class="dialog" title="Van Westendorp Details">
            <h2 class="center">How It Works</h2>
            <ul>
                <li>Things happen.</li>
                <li>It's awesome.</li>
            </ul>
            <h2 class="center">Why It Works</h2>
            <ul>
                <li>Science!</li>
            </ul>
        </div>
    </div>
</div>

ID为“ van_westendorp_link”的div是按钮，ID为“ van_westendorp_window”的div是应该打开的对话框。

这是我尝试使用Javascript的最新版本：

$("[id$='link']").click(function(){
    $(this).next("[id$='window']").dialog('open');
    event.preventDefault();
});

代码的第一行有效； 如果我将第二行替换为对对话框ID的明确引用，则一切正常。 这是第二行，我试图使用选择器来引用对话框，这使我感到困惑。

我将查询UI用于对话框代码，如果这很重要的话。 为什么我无法正确引用对话框？

Answer 1

您忘记了函数参数中的event ：

$("[id$='link']").click(function(event){
                                   ^
                                  here

Answer 2

用.dialog('open')替换.dialog('open') .dialog()

但是，如果您需要再次重新打开对话框，则必须使用另一种方法。

HTML：

<div id="van_westendorp_window" title="Box Title" style="display: none;">
...
</div>

jQuery：

$(document).ready(function() {
    $("[id$='link']").click(function(){
            var $theBox = $(this).next("[id$='window']");
            var $dialog = $('<div></div>')
            .html($theBox.html())
            .dialog({
                autoOpen: false,
                title: $theBox.attr('title')
            });

        $dialog.dialog('open');
        //event.preventDefault();
    });
});