子スパンを関数を呼び出すリンクに変更する

Question

私はAJAX関数を使用して、divをデータのスパンでテンプレートに埋め込みます。これらのスパンをリンクに追加したいと思います。リンクをクリックすると関数が呼び出されます。私が持っているものでは、hrefリンクが追加されているようですが、テキスト自体はまだクリック可能ではありません。

はここでIDEからだけでなく、IEの開発者ツールからのHTMLです：

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

はまた、作成しようとしました：

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

は、ここで私はこれまで試してみましたものです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>を生成しません。