여러 이벤트 핸들러가 호출 페이지에서 fancyBox

Question

을 다시 열 때, 내가 지금처럼, 반드시 href를 사용하여 내 fancyBox 바인딩 생성 :

myContent.cfm, 기본 "필터"에서

<a id="myId" href="myContent.cfm">Click me</a> 
<script> 
    $(document).ready(function(){ 
     $('a#myId').fancybox({ 
      // my initialization params 
     }); 
    }); 
</script> 

가 내장되어, 가지고있는 추가 단추를 삭제하십시오. 이런 식으로 뭔가 다음 AddFilter를 버튼을 클릭하면

<div id="fd_0" class="eachFilter blank"> 
    <select name="filterBy" class="fl filterBy"> 
     <option selected="selected">-- Add a Filter --</option> 
     <!--- add more options ---> 
    </select> 
    <button type="button" class="addFilter default" title="Add a filter to the current filter set.">+</button> 
    <button type="button" class="deleteThisFilter default" title="Delete this filter from the current filter set.">-</button> 
</div> 

, 새로운 "기본"필터가 연속 ID를 사용하여 클릭 된 필터 후 DOM에 추가됩니다. 반대로 deleteFilter 버튼을 클릭하면 해당 필터가 삭제되고 나머지 모든 필터의 ID는 번호가 다시 매겨집니다. 단 하나의 필터가 남아 있어야한다는 점만 다릅니다. 내 원래 코드과 같이 새로 생성 된 요소에 이벤트 핸들러를 연결하는 .live()를 사용 : 사용자가 그들이 필요로하는 모든 "필터"를 만들었습니다

$('.addFilter).live('click', function(){   
    // get number of existing filters 
    // create new blank filter 
    // add to the dom after the filter whose button was just clicked 
}); 
$('.deleteThisFilter).live('click', function(){  
    // if there is more than one existing filter, use .remove() to remove the parent .eachFilter div 
    // renumber the existing filter ids consecutively 
}); 

후,이 중 하나를 "적용"수를, 어떤 fancybox를 닫고 필터링 된 새 매개 변수로 그리드를 다시로드하거나 단순히 fancybox를 취소하고 닫습니다.

이 모든 것이 처음에는 정상적으로 작동하고 fancybox를 다시 열면 초기 빈 필터의 추가 버튼이 예상대로 작동합니다. 그러나 두 번째 필터를 추가하면 dom에 추가 된 모든 필터에 addFilter 및 deleteFilter 단추에 여러 이벤트 처리기가 추가됩니다. 처음으로 하나의 필터를 추가 한 다음 두 번째로 fancybox로 돌아온 다음 기본 필터의 추가 버튼을 클릭하여 필터를 추가 한 다음 새로 생성 된 필터 추가 버튼을 클릭하면 두 개의 필터가 추가됩니다. 닫은 후 fancybox를 다시 열어 필터를 추가하고 해당 필터 추가 버튼을 클릭하면 세 개의 필터가 더 추가됩니다.)

1)가 .live (를 변경 필터를 생성하는 코드를 넣는

$(document).on('click', 'addFilter', function(){ // add my filter code}); 

2) 호출 : 그래서 여기

는 지금까지 시도했습니다 무엇 마지막으로 .bind()을 사용하여 새로 생성 된 필터에 이벤트 처리기를 추가하는 함수로; 그 다음에 팬시 박스를 닫을 때

$('.addFilter').unbind('click', fnCreateMyFilter()) 

을 사용합니다. 사용

3).live()는 현재 버전 1.8.3의 기본 요소

4) 업그레이드 jQuery를에 새로 생성 된 필터 요소 및 일반 클릭 핸들러에 I는 인상 이었지만

5)합니다 (fancybox 내부의 모든 요소 기능 .remove()를 호출 .onClosed fancybox를 닫으면 실제로 dom에서 요소가 제거됩니다.

의견이 있으십니까?

Answer 1

언제나처럼, 그것은 명백하지 않은 가장 명백한 것입니다. 이동하기.js 코드가 팝업 파일에서 자체 파일로 수정되어 문제를 해결했습니다. 이는 모든 코드를 작동시킨 후에 수행하려는 의도였습니다.

Answer 2

나는 Fancybox2 http://fancyapps.com/fancybox/과 Noty 팝업 http://needim.github.com/noty/의 조합을 사용하여 비슷한 문제가 발생했습니다.

href 링크에 class='fancybox.ajax'을 사용하여 ajax를 통해 제품 편집 양식을 fancybox에로드했습니다.

fancybox에서 다른 (또는 동일한) 제품을 다시로드하기 전까지는 저장 버튼을 클릭하면 모든 것이 잘 저장되었습니다. 저장 버튼 이었기 때문에, 즉 여러 noty 팝업을 트리거 (I 상쾌 이후 fancybox를로드했던 때마다 한 번) 저장 사용

$(document).on("click",".save_product_button",function(){ 
    ... post to ajax file to save info 
}); 

:

나는 내 저장 버튼을 트리거하기 위해이 코드를 사용했다 이미 여러 번 문서 모델에로드되어 있습니다. (나는 추측합니까 ??)

하지만 내 on()을 저장 버튼의 바로 위 부모로 변경하면 모든 문제가 사라졌습니다.

$("#productBox").on("click",".save_product_button",function(){ 
    ... post to ajax file to save info 
}); 

모든 것이 이후로 한 번 저장됩니다.

더하기 코드를 더 빨리 만들어야합니다.

호프 이것은 내가 방금 한 것처럼 누군가 반나절을 낭비하지 않도록 도움을줍니다.