.wrap() 대신 .wrapInner를 사용합니다.

초보자는 여기입니다. jQuery wrapInner를 사용하여 원본 요소를 숨기려고 할 때 다음 선택 항목을 표시하려고합니다. 여기 내 jsfiddle입니다..wrap() 대신 .wrapInner를 사용합니다.

일단 라디오 버튼을 클릭하면 중간에있는 요소가 숨겨집니다. 취소 버튼은 요소를 다시 표시합니다. 하지만 라디오 버튼을 다시 클릭해도 아무 일도 일어나지 않습니다.

이 문제에 대한 도움이 감사하겠습니다.

HTML :

<div id="engr-action" > 
    <div id="engr-choice"> 
    <input id="endorse" class="engr-choice" type="radio" name="encoder-pick"/> 
     <label for="endorse">ENDORSEMENT</label> 
    <input id="encode" class="engr-choice" type="radio" name="encoder-pick"/> 
     <label for="encode">ENCODE</label>  
    </div> 
    <button id="cancel-action">Cancel</button> 
</div>

JQuery와 :

당신의 요소가 자바 스크립트를 통해, 당신의 $('#endorse').click(.. 이벤트가 늘 DOM에 존재하지 않았다 요소로 작동, "즉시"생성되기 때문에

$(function(){ 
$('#engr-choice').buttonset(); 

$('#cancel-action') 
    .button() 
    .click(function() { 
    $('#engr-choice').html(''); 
    $('#endorse-edit').hide(); 

    $('#engr-choice').wrapInner('<input id="endorse" class="engr-choice" type="radio" name="encoder-pick"/><label for="endorse">ENDORSEMENT</label>');     

    $('#engr-choice input').removeAttr('checked');  
    $('#engr-choice').buttonset('refresh');  

    return false; 
    }); 

$('#endorse').click(function(){  
    $('#engr-choice').html(''); 
    $('#engr-choice').wrapInner('<div id="endorse-edit"><a href="">Edit</a></div>'); 
    $('#endorse-edit').button();   

    return false; 
}); 
});

출처

2013-06-21 Charlesliam

.wrapInner를 여기에서 선택하는 것이 확실하지 않습니다. 단추를 클릭 할 때마다 DOM을 재구성하려고하면 코드가 지저분해질 수 있습니다. 더 자세히 설명하려는 내용을 설명해 주실 수 있습니까? –

HTML 코드의이 부분은 표의 열 이름 동작 아래에 있습니다. 여기서 표는 확인란 열, 제어 번호로 구성됩니다. 열, 작업 열 및이 하나의 작업 열. 작업 열은 이와 비슷한 다른 html로 구성됩니다. 테이블의 모든 행은 진행 상태에 영향을 받아 1에서 10까지 진행됩니다. engr-choice는 1,3,5,6과 같은 특정 진행 상황에 표시됩니다. 아래의 두 대답은 모두 정확합니다. 그들은 둘 다 어느 정도 대답을 설명합니다. – Charlesliam

, 따라서 이벤트를 위임을 사용하여 작성한 요소에 이벤트를 추가하려면 변경 :

$('#endorse').click(function(){  
..

$(document).on('click', '#endorse',function(){ 
...

에보기 :: Updated jsFiddle이

출처

2013-06-21 06:20:14

@jcsanyi가 js 스크립트에서 작성되었고 페이지로드시로드되지 않으면 요소를 이러한 요소에 위임해야합니다. –

통찰력을 주셔서 감사합니다. – Charlesliam

당신이 시도 할 수 있습니다 당신은 자바 스크립트를 통해 HTML 요소를 가하고 있습니다으로 Fiddle setup

$(function() { 
$('#engr-choice').buttonset(); 

$('#cancel-action').button().click(function() { 
     $('#engr-choice').html(''); 
     $('#endorse-edit').hide(); 
     $('#engr-choice').append('<input id="endorse" class="engr-choice" type="radio" name="encoder-pick"/>  <label for="endorse">ENDORSEMENT</label>'); 
     $('#engr-choice input').prop('checked', false); 
     return false; 
    }); 

    $('#engr-action').on('click', '#endorse', function() { 
     $('#engr-choice').html(''); 
     $('#engr-choice').wrapInner('<div id="endorse-edit"><a href="">Edit</a></div>'); 
     $('#endorse-edit').button(); 
    }); 
});

/jQuery를 그렇게 이벤트 바인딩을 직접하지 않습니다 사용할 수 있으니 event delegation을 통해 수행해야합니다. 즉, 가장 가까운 부모에게 이벤트를 위임하려면 #engr-action이거나 내가 할 수 있습니다. t는 $(document)이며 항상 이벤트를 위임 할 수 있습니다.

출처

2013-06-21 06:27:35 Jai

.wrap() 대신 .wrapInner를 사용합니다.

답변

관련 문제