2014-05-05 115 views
-1

我剛剛閱讀了一些關於使用on()將事件附加到動態創建的html元素的線程。我想出了這個例子FIDDLE嘗試將click事件綁定到通過AJAX返回的元素div.clicktitle。 div元素具有數據屬性,點擊事件應從該屬性獲取值並顯示它們。但它似乎沒有工作。on()點擊以將事件綁定到AJAX返回的元素

對我的工作是定義click事件函數並將其放入Ajax成功回調函數中。 FIDDLE這是使click事件與AJAX返回元素一起工作的唯一方法嗎?誰能告訴我爲什麼.on()不附加到div.clicktitle事件?

HTML前阿賈克斯

<div class="main"></div> 
<div class="second"></div> 

阿賈克斯後,它應該是

<div class="main"><div data-source="Hello" class="clicktitle"><h6>Title1</h6></div></div> 
<div class="second"><div data-source="Hello" class="clicktitle"><h6>Title2</h6></div></div> 

JS代碼:

$.ajax({ 
    url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22https%3A%2F%2Fnews.google.com%2F%3Foutput%3Drss%22&format=json&diagnostics=true&callback=", 
    success: function (data) { 
     var length = 0; 
     var items = data.query.results.item; 
     items = items.map(function(item){ 

     return '<div data-source="Hello" class="clicktitle"><h6 style="background:beige;">'+item.title+'</h6></div>'; 
     }); 
     var half = items.length/2; 
     for(var i = 0; i < items.length; i++) 
      if(i < half) 
       $('.main').append(items[i]); 
      else 
       $('.second').append(items[i]); 
      length++; 
     }, 

    error: function() {}   
}); 


    $('.clicktitle').on("click",function(){ 
     var datasource = $(this).data('source'); 
     $(this).text(datasource); 
    }); 
+0

請直接在問題中提供您的「嘗試」。你在濫用。我確信至少有一個你讀過的問題涵蓋了這個問題。 –

+0

我相信這會起作用:$(document).on(「click」,「.clicktitle」,function(){...}) – Alen

回答

2

這應該爲你做它:

$('div').on("click",'.clicktitle',function(){ 
     var datasource = $(this).data('source'); 
     $(this).text(datasource); 
}); 
1

問題是您嘗試將偵聽器直接添加到生成的元素。

你必須將它添加到父元素,並使用過濾器在功能上是這樣的:

$.ajax({ 
    url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22https%3A%2F%2Fnews.google.com%2F%3Foutput%3Drss%22&format=json&diagnostics=true&callback=", 
    success: function (data) { 
     var length = 0; 
     var items = data.query.results.item; 
     items = items.map(function(item){ 

     return '<div data-source="Hello" class="clicktitle"><h6 style="background:beige;">'+item.title+'</h6></div>'; 
     }); 
     var half = items.length/2; 
     for(var i = 0; i < items.length; i++) 
      if(i < half) 
       $('.main').append(items[i]); 
      else 
       $('.second').append(items[i]); 
      length++; 
     }, 

    error: function() {}   
}); 

    $('.main, .second').on("click",".clicktitle",function(){ 
    var datasource = $(this).data('source'); 
    $(this).text(datasource); 
    }); 

JSFIDDLE

希望此切口幫助您

1

你的綁定將不因爲你的元素還不存在,如果你採用@Alen的建議,應該爲你做,但你會評估處理器EVERYTIME點擊是在任何地方進行的。

在將代碼寫入DOM之前,您可以做的是將處理程序附加到該元素。

// Reusable event bheaviour 
function clickBinding = function(event){ 
    var $elem = $(event.target), 
     datasource = $(this).data('source'); 
    $elem.text(datasource); 
} 

// format item 
function formatItem (item){ 
//setup elems 
    var h6 = document.createElement('h6'), 
     clickTitle = document.createElement('div'); 
    // config h6 
    h6.style.background = 'beige'; 
    h6.innerHTML = item.title; 
    clickTitle.appendChild(h6); 
    // config clickTitle 
    clickTitle.className = 'clicktitle'; 
    clicktitle.setAttribute('data-source', 'Hello'); 
    // Add event listeners 
    if (clicktitle.addEventListener) { 
     clicktitle.addEventListener ('click', clickBinding, false); 
    } else if (clicktitle.attachEvent) { 
     clicktitle.attachEvent ('onclick', clickBinding); 
    } 
    // return elem 
    return clicktitle; 
} 

$.ajax({ 
    url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22https%3A%2F%2Fnews.google.com%2F%3Foutput%3Drss%22&format=json&diagnostics=true&callback=", 
    success: function (data) { 
     var length = 0; 
     var items = data.query.results.item; 
     items = items.map(function(item){ 
      return formatItem(item); 
     }); 
     var half = items.length/2; 
     for(var i = 0; i < items.length; i++) 
      if(i < half) 
       $('.main').append(items[i]); 
      else 
       $('.second').append(items[i]); 
      length++; 
     }, 

    error: function() {}   
}); 
+0

謝謝。這是工作[小提琴](http://jsfiddle.net/4XmUu/51/)。我發現使用'$(document).on(「click」,「.clicktitle」,function(){...})'會在每次點擊頁面上的任何位置時觸發該函數。我正在處理的點擊功能是檢索一個JSON文件! – RedGiant

相關問題