백본 클릭 이벤트가 동적보기에서 실행되지 않음

전달되는 각 모델에 대해 새 div를 만드는 백본보기가 있습니다. 그러나,보기에 어떤 종류의 이벤트도 발생시키지 않습니다 (a.change-status를 클릭하십시오). 내부의 요소가 템플리트에서도 생성되기 때문에이 이벤트가 있다고 가정합니다. 이 문제를 해결할 방법이 있다면 알려주십시오. 새 콘텐츠를 렌더링 후백본 클릭 이벤트가 동적보기에서 실행되지 않음

<script id="single-video-tmpl" type="text/x-jquery-tmpl"> 
<div> 
    <div class="video-info"> 
     <span class="video-title"><%=video_title%></span> 
     <div class="bottom-info"> 
      <a href="#<%=id%>" class="change-status"></a> 
     </div> 
    </div> 

</div> 
</script>

출처

2013-08-28 Drew Bartlett

당신이 설정하고있는'el' 속성은 이해가되지 않습니다. 선택기와 같은 jquery 여야합니다 (http://api.jquery.com/category/selectors/). – rednaw

각 모델마다 div를 만들었습니다. –

오, 그거 작동합니까? 솔직히 말해서 그런 걸 본 적이 없어요. 미안 해요. – rednaw

문제의 원인 일 수있는 몇 가지가 있습니다.

우선, 귀하의 el 선언은 용의성이있는 것으로 보입니다. 해당 클래스로 div를 원하면 속성을 정의해야합니다. 백본보기의 기본값은 div이므로이 속성을 정의해야합니다.

대신에 : el: '<div class="vendor-video" />'

바로 사용 className: 'vendor-video'이

내가보기 초기화 방법에 대한 자세한하지만 가장 좋은 방법이 표시되지 않은보기를 초기화 한 후 컨테이너에 렌더링하기 :

var yourVideoDivView = new videoDivView({model: model}); 
$("#your-video-container").html(yourVideoDivView.render().el)

마지막 줄 작업을 얻으려면 return this;을 렌더링 방법으로 사용해야합니다. 보기는 그렇지 않으면 아무 의미 이미 DOM에서 후

render: function(){ 
    ... 
    return this; 
}

는 this.delegateEvents() 사용 정보,이 함수를 호출해야합니다. 예 :

$("#your-video-container").html(yourVideoDivView.render().el) 
yourVideoDivView.delegateEvents();

delegateEvents() 뷰 이벤트가 다시 살아납니다.

출처

2013-08-28 09:42:45 dombesz

div. $ el.find ('a.change -status '). trigger ('click '); delegateEvents()가 발생한 직후에 발동하지만 그렇지 않으면 클릭하면 발동하지 않습니다. 다른 뷰를 감싸는 것과 관련이 있다고 생각합니까? –

nevermind, 위와 같은 방법으로 상위보기를 렌더링해야했습니다. 감사합니다. –

delegateEvents() worked. thanks :) 감사합니다. – sunnyvilles

가 this.delegateEvents()을 시도처럼

var videoDivView = Backbone.View.extend({ 
el: '<div class="vendor-video" />', 
initialize: function(){ 
    _.bindAll(this); 
    this.render(); 
    this.model.on('change:published', this.enableSaveButton); 
}, 
events: { 
    'click a.change-status'  : 'changeVideoStatus' 
}, 
template: video_tmpl, 
render: function(){ 
    this.$el.attr("id", 'video-'+this.model.id); 
    this.$el.html(this.template(this.model.toJSON())); 
    this.$el.data('status', video_statuses[this.model.get('published')]); 
}, 
changeVideoStatus: function(e) { 
    console.log(this.model); 
    return false; 
}, 
enableSaveButton: function() { 
    $('#save-changes').removeClass('disabled').removeAttr('disabled'); 
} 
});

예를 들어 템플릿이 보일 것이다.

출처

2013-08-28 00:31:54 kikuchiyo

나는 그걸 추가하려고했지만 아무 것도 변경하지 못했다 : ( –

지금 워드 프로세서가 작동하는 것 같다. –

이게 나와 함께 일했어. – Ahmed

비슷한 문제가있었습니다. 두 단계로이 문제를 해결할 수 있습니다.
-보기에서 을 작성 - this.$el
로 템플릿을 추가하십시오. 그게 전부입니다. 그리고 작동하지 않고 this.delegateEvents()

출처

2014-10-23 08:56:11

내가 tagName에서 관찰하고 this를 사용하여 추가하는 문제 : $ el은 이벤트 listener가 선택한 tagName으로 생성 된 마지막 요소에 대한 이벤트를 첨부하지 못했습니다. 그러나이 요소를 DOM에 추가 한 후에 this.delegateEvents()를 사용할 때 문제가 해결되었습니다.

출처

2014-11-23 11:21:45

백본 클릭 이벤트가 동적보기에서 실행되지 않음

답변

관련 문제