jQuery에서 추가 된 html 문자열에 함수를 추가하려면 어떻게해야합니까?

웹 개발뿐만 아니라 jQuery도 처음 사용합니다. :-)jQuery에서 추가 된 html 문자열에 함수를 추가하려면 어떻게해야합니까?

질문 작성 페이지를 만들고 싶습니다. 그것은 질문 텍스트 상자와 추가 버튼이 있습니다. 사용자가 추가 단추를 누르면 새 질문 텍스트 상자가 생기고 다음 줄에 새로운 추가 단추가 나타납니다. 그러나 이전 Add 버튼은 삭제 버튼이되어 그 기능을 변경합니다. 여기

는 jQuery 코드이다

$(function() { 
     $(".buttonMinus").hide(); 

     $(".buttonPlus").click(function (event) { 
     $(this).remove(".buttonPlus"); 
     $(".buttonMinus").show(); 
     $("#p1").append("<p id='p2'>Question: <input type='text'><button type='button' class='buttonPlus'></button></p>"); **// Here !!!!** 
     alert("Welcome " + $(".ttt").val() + "!");   
    }); 

    $(".buttonMinus").click(function (event) { 
     alert("You have pressed the DELETE button!"); 
    });

}); 여기

그리고

는 HTML 코드입니다 :

<body> 
<div class="demo"> 
    <p id="p1">Your name: <input type="text" class="ttt"/> 
    <button class="buttonPlus" type="button"></button> 
    <button class="buttonMinus" type="button"></button></p> 
    <br /> 
</div>  
</body>

나는 두 개의 서로 다른 클래스로 모든 추가 버튼 및 마이너스 버튼을 넣어, ".buttonPlus"와 ".buttonMinus". .buttonPlus는 기본 html로 라인을 추가 할 때 잘 작동합니다. 그러나 .append() 함수로 추가 할 때 작동하지 않습니다. 버튼에 .buttonPlus의 CSS 코드를 추가하는 것만으로 $ (". buttonPlus") click (function (event) {...})이 새 buttonPlus에 첨부되지 않습니다 ..

왜 나는이 문제를 해결할 수있는 방법?

감사합니다, 애슐리을

출처

2011-10-07 nigong

jQuery에 오신 것을 환영합니다. 이는 일반적인 문제입니다. 첫 번째로 click 이벤트를 .buttonPlus에 바인드 할 때 새로운 .buttonPlus 요소가 존재하지 않기 때문에 문제가 발생합니다. 처음으로 click 이벤트를 바인딩하면 페이지에 이미 존재하는 요소에만 바인딩됩니다. 이것이 모든 코드를 $(function()) 안에 포함시키는 모든 이유입니다. 모든 DOM 요소가 만들어 질 때까지 실행되지 않습니다.

몇 가지 다른 해결책이 있습니다. Ryan이 제안한 것처럼 가장 간단한 방법은 jQuery의 .live() 메소드를 사용하는 것입니다. 이렇게하면 지정된 click 이벤트가 새로 만들어지는 .buttonPlus 요소로 자동 바인딩됩니다.

그러나 이것은 가장 간단한 솔루션이지만 매우 계산 비용이 많이 듭니다. 여기에 세부 사항을 설명하지는 않겠지 만 .live()을 사용하면 거의 최선의 선택 사항이 아닙니다. 대신 사용할 수있는 유사한 jQuery 메서드 인 .delegate()이 있습니다. 그러나 .delegate()은 .live()보다 저렴하지만 여전히 최상의 솔루션은 아닙니다.

Diodeus가 언급 한 것처럼 최상의 솔루션은 추가 될 때 이러한 요소를 "다시 바인딩"하는 것입니다. 다음과 같은 방법으로 그렇게 할 수 있습니다 : 당신이 볼 수 있듯이, 우리가하고있는 모든 별도의 기능에 click 이벤트에서 실행되는 코드를두고있다

function btnClickEvent(btn){ 
    btn.remove(".buttonPlus"); 
    $(".buttonMinus").show(); 
    $("#p1").append("<p id='p2'>Question: <input type='text'><button type='button' class='buttonPlus'></button></p>"); 
    alert("Welcome " + $(".ttt").val() + "!"); 

    //Re-binding 
    var newBtn = $("#p1").find('.buttonPlus:last'); 
    newBtn.click(function(){ 
     btnClickEvent(newBtn); 
    }); 
} 

$(function(){ 
    $(".buttonMinus").hide(); 

    $(".buttonPlus").click(function(){ 
     btnClickEvent($(this)); 
    }); 

    $(".buttonMinus").click(function (event) { 
     alert("You have pressed the DELETE button!"); 
    }); 
}

. 이를 통해 새로운 버튼에 쉽게 바인딩 할 수 있습니다. 마이너스 버튼으로도 비슷한 일을하고 싶을 것입니다.

출처

2011-10-07 18:13:46 maxedison

우수 답변! jQuery에 대한 큰 그림을 보여줍니다! 고맙습니다! – nigong

일단 AJAX를 사용하기 시작하면 이런 종류의 것이 특히 중요해질 수 있습니다. – maxedison

Here is a modified, but working version of what you've got going on in your code...

당신은 가능성이 같은 jQuery's live() 기능을 사용할 수 있습니다

...

$(".buttonPlus").live("click",function (event) { 
    $(this).remove(".buttonPlus"); 
    $(".buttonMinus").show(); 
    $("#p1").append("<p id='p2'>Question: <input type='text'><button type='button' class='buttonPlus'></button></p>"); **// Here !!!!** 
    alert("Welcome " + $(".ttt").val() + "!"); 
}); 

$(".buttonMinus").live("click",function (event) { 
    alert("You have pressed the DELETE button!"); 
});

이것은 DOM이 아직 추가되지 않은 요소에 동일한 이벤트 처리를 적용합니다.

출처

2011-10-07 18:03:32 Ryan

클릭 핸들러를 만들면 현재 페이지에있는 요소 만 연결됩니다. 나중에 추가 된 것은 그렇지 않습니다.

추가 할 때 이러한 요소를 다시 바인딩하거나 자동으로 수행 할 jQuery의 .live() 기능을 사용할 수 있습니다.

출처

2011-10-07 18:06:26

jQuery에서 추가 된 html 문자열에 함수를 추가하려면 어떻게해야합니까?

답변

관련 문제