jQuery 弹出窗口在 $( "#div_id" ).dialog() 之后无法正确出现;

Question

我有这个jQuery函数:

$('#invite_friends_email').live('click' , function() 
{
    $("#invite_friends_email").dialog();
    return false;       
});

然后在那个页面上导入div，像这样

<?php
include '../divs/invite_frineds_by_email.php';
?>

和div本身看起来像这样:

<div id="invite_friends_email" style="display: none;">
    <form method="post" action="">
    <p>
    <br />
        <h3>Enter Your Friends Email Addresses (Separated by Comma)</h3>
        <textarea type="textarea" rows="2" cols="75" name="emails"></textarea>
    </p>
    <p>
        <strong><h3>Email Subject (Edit subject to add your name so your friends recognize you)</h3></strong>
        <input type="text" name="subject" size="75" value="Your friend wants to invite you to brainstorm problem solutions">
    </p>
    <p>
        <h3>Enter Your Message: (Edit the body of the text however you like)</h3>
        <textarea type="textarea" rows="5" cols="75" name="message">Here is the URL of the problem:
    http://www.problemio.com/problems/problem.php?problem_id=<?php echo $problem_id; ?>
        </textarea>
    </p>
    <p>
        <input type="submit" style="border: none;" alt="Send email!" />
    </p>
    </form>
</div>

你可以这样重现当前的问题:http://www.problemio.com/problems/problem.php?problem_id=225并点击"通过电子邮件邀请朋友"链接。现在我可以告诉点击功能正在被调用，但不确定为什么对话框没有弹出。知道怎么让它出现吗?

Answer 1

你的代码实际上写着:

$('#invite_friends_email').live('click' , function() 
{
    $("#invite_friends_email_div").dialog();
    return false;       
});

查看HTML, invite_friends_email_div在任何地方都不存在。此外，你发布的HTML，例如，"输入你的朋友的电子邮件地址"在页面的任何地方也不存在。看起来您忘记包含php中的div了。

Answer 2

你应该把对话框div放到problem.php文件中，这样jquery选择器就可以使用它了

Answer 3

可能有两方面的问题。

您的div和您的邀请朋友链接具有相同的id，因此使用#invite_friends_email选择器可能首先返回a标记。因为它只会返回第一个结果，所以如果它是你的a标签或div，那就太走运了。

第二，我检查了生成的HTML，我不能看到你的div在任何地方，所以看看它是否包含正确。

Answer 4

我检查了你的问题，事实上它不打开对话框，如果我点击链接。如果我打开Chrome JavaScript控制台并手动输入$("#invite_friends_email").dialog()，那么对话框就会打开链接包装(尽管这没有多大意义)。

基本上你使用的id就是链接本身的id。相反，它应该是您希望在对话框中显示的div之一。也许这就是问题所在