骨幹JS事件不會對動態添加元素

觸發我有一個骨幹視圖呈現外部把手模板（* .hbs）。該視圖在實例化的另一視圖中呈現，實質上：骨幹JS事件不會對動態添加元素

MainAppView 
render: function() { 
//load main layout 
var childView = new ChildView(); 
} 


ChildView 

render: function() { 
$('body').append(this.template(data)); 
} 

template: 

<ul id="someId"> 
<li><a> {{data}}</a></li> 
</ul> 

and an events hash in the childView like this: 

events: { 
    'click #someId li a' : 'doSomething' 
} 

doSomething: function() { event.preventDefault(); console.log("exit");}

這就是它的要義。問題是，選擇器#someId li a不起作用，它無法執行doSomething

我使用jQuery驗證選擇器，通過綁定Chrome控制檯中的函數doSomething，可以正常工作。

我想我知道它爲什麼不能在Backbone中工作，但HBS模板在ChildView實例化後觸發delegateEvents後呈現，這意味着我沒有使用選擇器的元素，因此沒有任何東西界。我嘗試了一個身體前綴，但是，也沒有工作。

我需要做什麼？

來源

2015-11-03 Parijat Kalia

'$（ '身體'）追加（this.template（數據））;'只有instanciating'ChildView'外觀奇。初始化之後，事件通過'delegateEvents（）'方法建立。 DOM操作，如'空（）'或'HTML（）'上的父節點調用時可能會刪除這些偵聽器。請添加呈現'MainAppView'的方式。檢查是否有之前'使（）的任何這些調用的''荷蘭國際集團的ChildView'首次或再次 –

你ChildView渲染方法渲染視圖的內容進入體內，而不是內部本身。你應該呈現這個樣子：

render: function() { 
    this.$el.append(this.template(data)); 
    $('body').append(this.$el); 
}

的原因doSomething功能沒有被稱爲是因爲在骨幹事件都被委託給視圖（view.el）的根元素。以下是基本上是骨幹，是引擎蓋下做：

'click #someId li a' : 'doSomething'

成爲

view.$el.on('click', '#someId li a', view.doSomething);

如果你去和模板的內容直接追加到body而不是視圖的EL，事件絕不會被視圖所捕獲，因此不會調用回調。

來源

2015-11-03 23:27:04

我覺得DoSomething的功能缺少參數event這樣添加參數：

doSomething: function(e) { e.preventDefault(); console.log("exit");}

來源

2015-11-04 05:27:54

@TJ THX編輯我是第一個寫 –

你是認真的，你不需要在事件參數來傳遞到功能 –

@ParijatKalia你怎麼做。它只適用於Chrome（也許是IE），因爲它們有一個名爲event的全局變量，用於存儲最後一個事件。如果你試圖在Firefox中運行這段代碼，它會拋出錯誤，'事件'是未定義的。 –

骨幹JS事件不會對動態添加元素

回答

相關問題