jeditable propagation

Question

나는 jeditable을 사용하고 있으며 jeditable에 바인딩 된 모든 중첩 요소가 있습니다. 문제는 중첩 된 요소를 클릭 할 때 클릭 이벤트가 최상위 부모에서 트리거되는 것입니다. 어떻게 이것을 피할 수 있습니까?

$(document).ready(function() { 
console.log('loading'); 
$('div.wrapper').editable('edit/', { 
    loadurl : 'edit/', 
    //id  : 'section', 
    name  : 'content', 
    submitdata : function(value, settings) { 
     var section = $(this).parent('section').attr("data-section"); 
     return { 
      section: section, 
      type: 'ajax', 
     } 
    }, 
    loaddata : function(value, settings) { 
     var section = $(this).parent('section').attr("data-section"); 
     return { 
      section: section, 
      type: 'ajax', 
     } 
    }, 
    rows  : 6, 
    width  : '100%', 
    type  : 'textarea', 
    cancel : 'Cancel', 
    submit : 'OK', 
    indicator : 'Saving changes', 
    tooltip : "Doubleclick to edit...", 
    onblur : 'ignore', 
    event  : "dblclick", 
    style  : 'inherit', 
    callback : function(value, settings) { 
     // console.log(this); 
     console.log(value); 
     console.log(settings); 
     $('section[class^="annotation"]').each(function(index) { 
      $(this).attr('data-section', index + 1); 
     }); 
    } 
}); 
}); 

[편집]

가 여기에 HTML 코드입니다 :

<article> 
    <section class="annotation1" data-section="1" id="section_data-section1" typeof="aa:section"> 
     <div class="wrapper" title="Doubleclick to edit..."> 
      <h1>Section </h1> 
      <p>some content</p> 
      <section class="annotation2" data-section="2" id="subsection_data-section2" typeof="aa:section"> 
       <div class="wrapper" title="Doubleclick to edit..."> 
        <h2>Subsection </h2> 
        <p>some more content</p> 
       </div> 
      </section> 
     </div> 
    </section> 
</article> 

감사합니다! 당신이 이벤트 전파를 중지 할 수 있도록

Answer 1

이 내가 원래 생각했던 것보다 복잡합니다 ...

첫째, 당신은 div.wrapper의 .dblclick 이벤트를 처리 할 수있다. 각에서 두 번 클릭하면 요소에 jEditable를 연결하고 .editable()을 호출 한 후 .click()을 (를 트리거 있습니다. 요소 편집을 마친 후, jEditable 요소를 파괴한다.

나는 그것의 끝이었다 생각하지만, 바깥 쪽 div.wrapper 요소 편집을 마치면 div.wrapper 이벤트가 사라졌습니다! div.wrapper 요소는 편집 가능한 요소가되기 전에 복제되어야하며, jEditable이 래퍼 요소를 복원 한 직후에 복제됩니다. 이전에 저장된 복제본으로 대체됩니다.

$('div.wrapper').dblclick(function(event) { 
    event.stopPropagation(); 

    // save a clone of "this", including all events and data 
    $(this).data('clone', $(this).clone(true, true)) 
     .editable('edit/', { 
     onreset: function() { 
      var $that = this.parent(); 
      $that.editable('destroy'); 

      // restore the editable element with the clone 
      // to retain the events and data 
      setTimeout(function() { 
       $that.replaceWith($that.data('clone')); 
      }, 50); 
     } 
    }).click(); 
}); 

Se 행동 중 : http://jsfiddle.net/william/vmdz6/3/.

복제 된 요소가 편집 된 데이터로 업데이트 된 후 수동으로 업데이트해야 할 수도 있습니다. callback 함수에서 그렇게 할 수 있어야합니다.