Question

当用户点击具有特定类的链接时，我正在尝试创建自定义确认对话框。这很简单，但问题是，如果用户点击对话框中的“确认”按钮（使用Twitter Bootstrap 3），我想触发点击相同的链接，但这次不是显示对话框，而是按照链接。

当我想使用某些参数触发<a>标记上的点击事件时，一切都很顺利。这是我想要实现的非常简化的样本

HTML：

<a class="initial" href="http://yell.com">click me</a>
<div class="dialog hidden">
    <a href="#">Click me again</a>
</div>

JavaScript的：

$(document).on('click', 'a.initial', function(e, forced){
    //return true;
    if(typeof(forced) !== 'undefined' && forced === true){
        $(this).addClass('clicked');
        console.log('Clicked');
        return true;
    } else{
        e.preventDefault();
        $(this).removeClass('clicked');
        $('div').removeClass('hidden');
    }
});

$(document).on('click', 'div.dialog a', function(e){
    $(this).parent().addClass('hidden');
    $(this).parent().prev().trigger('click', [true]);
});

以下是JSFiddle示例

如您所见，如果单击第二个链接，则第一个链接显示为红色，以及console.log触发消息，但该链接不会跟随该URL。不幸的是，我没有看到任何错误或警告可以给我一些线索。我知道我可以使用window.location = $（element）.attr（'href'），但我想知道为什么它不能以描述的方式工作？

非常感谢任何帮助。

Answer 1

可以这样做，例如，运行

document.getElementById('nav-tags').click();

在此页面上，用户将转到标签页面。

因此，似乎问题是jQuery触发器功能。

然后问题就变成了，能够原生地触发click事件，但也将强制布尔值传递给事件。

我想出的解决方案是删除第二个参数，并通过data在原始链接中设置状态：

$(document).on('click', 'a.initial', function(e){
    //return true;
    if($(this).data('trigger') === true) {
        $(this).addClass('clicked');
        console.log('Clicked');
    } else{
        e.preventDefault();
        $(this).removeClass('clicked');
        $('div').removeClass('hidden');
        $(this).data('trigger', false);
    }
});

$(document).on('click', 'div.dialog a', function(e){
    $(this).parent().addClass('hidden');
    $(this).parent().prev().data('trigger', true).get(0).click();
});

JSF

Answer 2

您可以考虑使用这样的解决方案：

$(document).on('click', 'a.initial', function(e, forced){
    e.preventDefault();
    $('div').removeClass('hidden').find("a").attr("href",this.href);
});

:)像@Archer建议解决方案。

Answer 3

试试这个：

$(document).on('click', 'a.initial', function(e, forced){
    e.preventDefault();    
    //return true;
    if(typeof(forced) !== 'undefined' && forced === true){
        $(this).addClass('clicked');
        console.log('Clicked');
        return true;
    } else{
        //e.preventDefault();
        $(this).removeClass('clicked');
        $('div').removeClass('hidden');
    }
});

$(document).on('click', 'div.dialog a', function(e){
    e.preventDefault();
    $(this).parent().addClass('hidden');
    $(this).parent().prev().trigger('click', [true]);
});

Answer 4

好。我发现了一些东西根据下面的票证，这已经是jquery中的一个错误，但已关闭。

http://bugs.jquery.com/ticket/11326

解决方法是在锚点内添加一个span（或类似的）并添加点击它。请在下面找到相同的小提琴

http://jsfiddle.net/RCmar/2/

<强> HTML

<a class="initial" href="http://yell.com"><span>click me</span></a>
<div class="dialog hidden"><a href="#">Click me again</a></div>

<强> JS

$(document).on('click', 'a.initial span', function(e, forced){
    //return true;
    alert(1);
    if(typeof(forced) !== 'undefined' && forced === true){
        $(this).addClass('clicked');
        console.log('Clicked');
        return true;
    } else{
        e.preventDefault();
        $(this).removeClass('clicked');
        $('div').removeClass('hidden');
    }
});

$(document).on('click', 'div.dialog a', function(e){
    $(this).parent().addClass('hidden');
    $(this).parent().prev().children().trigger('click', [true]);
});

jquery在click处理程序中使用trigger（'click'）

4 个答案: