div - jQuery의 내용 변경

div - jQuery의 내용 변경

링크 중 하나를 클릭했을 때 이 div의 내용을 어떻게 변경할 수 있습니까?

<div align="center" id="content-container">
    <a href="#" class="click cgreen">Main Balance</a>
    <a href="#" class="click cgreen">PayPal</a>
    <a href="#" class="click cgreen">AlertPay</a>
</div>

링크에 대한 .click 이벤트를 구독하고 다음 방법으로 div의 내용을 변경할 수 있습니다.

$('.click').click(function() {
    // get the contents of the link that was clicked
    var linkText = $(this).text();

    // replace the contents of the div with the link text
    $('#content-container').html(linkText);

    // cancel the default action of the link by returning false
    return false;
});

그러나 이 div의 내용을 바꾸면 할당한 클릭 핸들러가 파기됩니다.이벤트 핸들러를 첨부해야 하는 div 내부에 새로운 DOM 요소를 주입하려는 경우, 이 첨부 파일은 새 내용을 삽입한 후 .click 핸들러 내부에서 수행해야 합니다.이벤트의 원래 선택기가 보존되어 있는 경우 핸들러를 연결하는 방법을 살펴볼 수도 있습니다.

여기에 사용하고 싶은 jQuery 기능이 2개 있습니다.

1)click. 이것은 유일한 매개변수이기 때문에 익명 기능을 사용하고 요소를 클릭하면 이를 실행합니다.

2)html. 이렇게 하면 html 문자열이 유일한 매개 변수로 사용되며 요소의 내용이 제공된 html로 대체됩니다.

따라서 사용자의 경우 다음과 같은 작업을 수행할 수 있습니다.

$('#content-container a').click(function(e){
    $(this).parent().html('<a href="#">I\'m a new link</a>');
    e.preventDefault();
});

---

만약 당신이 당신의 디브에 모든 것을 교체하는 것이 아니라 오직 콘텐츠를 추가하고 싶다면, 당신은 다음을 사용해야 합니다.append:

$('#content-container a').click(function(e){
    $(this).parent().append('<a href="#">I\'m a new link</a>');
    e.preventDefault();
});

---

클릭했을 때 새 추가된 링크도 새 내용을 추가하려면 이벤트 위임을 사용해야 합니다.

$('#content-container').on('click', 'a', function(e){
    $(this).parent().append('<a href="#">I\'m a new link</a>');
    e.preventDefault();
});

$('a').click(function(){
 $('#content-container').html('My content here :-)');
});

() 로 교체하여 동일하게 시도할 수 있습니다.

$('.click').click(function() {
    // get the contents of the link that was clicked
    var linkText = $(this).text();

    // replace the contents of the div with the link text
    $('#content-container').replaceWith(linkText);

    // cancel the default action of the link by returning false
    return false;
});

그.replaceWith()method는 DOM에서 콘텐츠를 제거하고 한 번의 호출로 새로운 콘텐츠를 그 자리에 삽입합니다.

jQuery를 사용하여 div의 내용을 변경하려면 이 작업을 수행합니다.

더보기 @ jQuery를 사용하여 div의 내용 변경

$(document).ready(function(){
    $("#Textarea").keyup(function(){
        // Getting the current value of textarea
        var currentText = $(this).val();

        // Setting the Div content
        $(".output").text(currentText);
    });
});

해라$('#score_here').html=total;

언급URL : https://stackoverflow.com/questions/7139208/change-content-of-div-jquery