Question

我有2个jquery脚本，我不确定如何组合它们。

脚本＃1：DIV中有一个链接，使整个DIV可点击链接。

脚本＃2：从链接打开模态窗口（标准jQuery UI模式）。

以下是HTML：

<div class="singlefeatureditem">
<a href="product.php?id=123" class="opennewwindow">
<img src="products/thumb_placeholder.jpg" width="125" height="125" alt="thumb"><br>
Item 1</a>
</div>

以下是JS：

//make the whole div clickable
$(document).ready(function() {
    $(".singlefeatureditem").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
    });
});

//open the link in a modal window
    $(function (){
        $('a.opennewwindow').click(function() {
            var url = this.href;
            // show a spinner or something via css
            var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
            // open the dialog
            dialog.dialog({
                // add a close listener to prevent adding multiple divs to the document
                close: function(event, ui) {
                    // remove div with all data and events
                    dialog.remove();
                },
                modal: true
            });
            // load remote content
            dialog.load(
                url, 
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    // remove the loading class
                    dialog.removeClass('loading');
                }
            );
            //prevent the browser to follow the link
            return false;
        });
    });

我目前得到的结果（我猜这是预期的）是，如果我点击链接我得到模态，如果我点击DIV（链接之外）链接工作，但它只是打开页面没有模态的。

我想让整个DIV成为一个链接并打开模态，无论点击DIV的哪个位置。

有什么想法？谢谢！克里斯

Answer 1

使用 window.location 时，不会触发链接的onclick事件。尝试模拟点击，如下所示：

//make the whole div clickable
$(document).ready(function() {
    $(".singlefeatureditem").click(function(){
     $(this).find("a").click(); /// << "simulate" a click
     return false;
    });
});

结合2个jQuery脚本，使DIV成为链接和开放模态

1 个答案: