将子跨度更改为调用函数的链接

Question

我有一个 AJAX 函数，它将带有数据范围的div填充到模板中。我想将这些跨度附加到链接，当点击它时调用一个函数。凭借我所拥有的，它确实似乎增加了一个href链接，但文本本身仍然无法点击。

这里是来自IDE的html以及IE中的开发人员工具：

 <div id="subtotal_menu">
    </div>

这是我到目前为止所尝试的内容：

 var $menu = $('#subtotal_menu');
 $menu.empty();
 $('#checkTemplate').tmpl(data.d.Checks).appendTo($menu);
 $("#subtotal_menu").find("span").attr('href','myfunction()');

还尝试创建一个单独的函数来操作DOM元素：

    function createVendorInvoiceLinks() {
           var subTotalmenu = document.getElementById("#subtotal_menu").find("span");
           var aTag = document.createElement('a');
           aTag.setAttribute('href', "myfunction()");
           subTotalmenu.appendChild(aTag); 
           }

Answer 1

这可以帮到你：

var $menu = $('#subtotal_menu');
$menu.find("span").append('<a href="javascript:void(0)">Link</a>');
// append an anchor to the span inside #subtotal_menu
// set javascript:void(0) as href to avoid unwanted behaviour on click

$('#subtotal_menu').on('click', 'a',function(){
    alert('clicked');
    // do whatever myfunction() does
});
//set up a proper event handler and use event-delegation to cope with 
//dynamic added element from e.g. your mentioned ajax-request

如果希望整个范围可以点击，只需将事件处理程序中的绑定从a更改为span即可。这样你就不需要附加一个锚点。

<强> Example

<强>参考

jQuery .append()

event delegation

Answer 2

不应将<a>元素附加到范围，而应该执行相反的操作：

function createVendorInvoiceLinks() {
       var subTotalmenu = document.getElementById("#subtotal_menu").find("span");
       var aTag = document.createElement('a');
       aTag.setAttribute('href', "myfunction()");
       aTag.appendChild(subTotalmenu); 
       }

因此，您不会生成没有内容的<a>。