9

我之前问过这个问题，但我认为我没有正确解释我想要完成的事情。

我的网站上有多个链接，我想从 jquery ui 模态对话框小部件中的链接打开内容。

我正在尝试使用“this”来引用用户动态选择的链接。我在这里做错了什么？

我正在使用的代码如下：

<a href="index.cs.asp?Process=comments&id=1" id="test">comment #1</a>
<a href="index.cs.asp?Process=comments&id=2" id="test">comment #2</a>
<a href="index.cs.asp?Process=comments&id=3" id="test">comment #3</a>
<div id="somediv"></div>                                    
    <script type="text/javascript">

    $(document).ready(function() {  

        $("#somediv").load(this.getTrigger().attr("href")).dialog({
            autoOpen: false,
            width: 400,
            modal: true
        });     
        $("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});

</script>
4

2 回答 2

16

http://jsfiddle.net/qp7NP/

一些更改：将 ID 更改为 Class 并使用 IFrame。

<a href="http://wikipedia.com/" class="test">comment #1</a><br>
<a href="http://ebay.com/" class="test">comment #2</a><br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
    <iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
    $(".test").click(function () {
        $("#thedialog").attr('src', $(this).attr("href"));
        $("#somediv").dialog({
            width: 400,
            height: 450,
            modal: true,
            close: function () {
                $("#thedialog").attr('src', "about:blank");
            }
        });
        return false;
    });
});
</script>

如果您想引入 HTML 而不是 IFrame，则必须使用 Ajax (XMLHttpRequest)，如下所示：http: //jsfiddle.net/qp7NP/1/

于 2013-03-23T00:45:10.753 回答
0

您不能有多个具有相同 ID 的元素。改为将链接更改为class="test"，因此将点击事件更改为$('.test').click()。

另外，如果您仍然有问题，我记得我遇到了一些类似的问题，因为 JQUery Dialog 是如何处理 DOM 的。它会从字面上撕掉您的#somediv 内容并将其附加到页面底部以显示该对话框。我通过将其包装在另一个 div 中解决了我的动态对话框加载问题。

<div id="somediv-wrap">
  <div id="somediv">

  </div>
</div>

<script>
    $(document).ready(function() {  

        $("#somediv-wrap").dialog({
                  autoOpen: false,
                   width: 400, 
                   height:200,
                   modal: true
                  });  

        $(".test").click(function(event)
          {
              event.preventDefault();
              var link = $(this).attr('href');

              $("#somediv").load(link,function(){
               $( "#somediv-wrap" ).dialog( "open" );   
              });                        
      });
   });
</script>
于 2013-03-23T00:22:28.593 回答