Question

我有<span class="clickspan">Some text here</span>

我要做的是当点击span时，为点击的范围创建动态锚点，然后在动态锚点上使用jquery触发click事件。

$('.clickspan').on('click', function(){

    // Method 1: Replace span with dynamic anchor
    $(this).replaceWith('<a id="1234" href="www.example.com"></a>');

    // None of the following works
    $('#1234').trigger('click');
    $('#1234').click();

    // Method 2: Insert dynamic anchor inside the span
    var theSpan = $(this).wrapInner('<a href="'+data.msg+'" donwload></a>'),
        anch = theSpan.find('a');

    // this click event on the dynamic anchor inside the span causes the click
    // event on the parent span and to run the entire script all over again.
    anch.click(); 
});

我一直在努力解决这个问题并且用尽所有想法，所以我很感激任何建议。

解决

@Ninsly在下面的评论中提出的方法和来源修复了这个问题。以下工作：

$('#1234')[0].click();

抱歉占用了每个人的时间。我不知道需要使用[0]。

Answer 1

创建<a>标记后，将.click事件绑定到该标记，然后使用$('#1234')[0].click();。

有时，当您创建动态html时，您必须将事件绑定到您正在创建的html。

希望有所帮助：）

Answer 2

方法1工作得很好，只需要在DOM元素上触发click事件，而不是jQuery对象。

＆＃13;

$(function() {
  $('.clickspan').on('click', function() {
    var anch = $('<a id="1234" href="http://harvest.com"></a>');
    $(this).replaceWith(anch);
    anch[0].click();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="clickspan">Some text here</span>

＆＃13;

特别注意：

大多数网站不再允许在框架中显示....因此该代码段可能不会显示该网站。请参阅控制台输出：

Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. js:1
Refused to display 'https://www.yahoo.com/' in a frame because it set 'X-Frame-Options' to 'DENY'. js:1
Refused to display 'https://twitter.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Answer 3

看起来你想要一个重定向：

$('.clickspan').on('click', function(){
    document.location.href = 'http//example.com';
});

Answer 4

尝试这种方式：

$(document).on("click", '.clickspan', function(){

});

如果动态添加元素，则必须在孔文档上绑定使用侦听器。

Answer 5

这可能会对你有所帮助。让我知道。以下是工作演示http://jsfiddle.net/wu35uLt4/

的链接

$(function(){

    function ondynAchorClick(){
        alert('link auto clicked');
    }

     $('.clickspan').on('click', function(){

         var _anch = $('<a id="1234" href="http://www.example.com"><span>Am link now</span></a>');
         /*
           Optionally you can add a handler if you don't want to redirect
         _anch.click(ondynAchorClick);
         */
         $(this).replaceWith(_anch);    
         _anch.find('span').click();
    });

});

动态锚点上的jquery .click（）事件不起作用

5 个答案: