更改div的内容-jQuery [英] Change content of div - jQuery

查看:101
本文介绍了更改div的内容-jQuery的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当单击LINKS之一时,如何更改此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事件,并使用 $('.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处理程序内执行此附件.如果保留了事件的原始选择器,您还可以查看 .delegate 方法来附加处理程序. /p>

How is it possible to change the content of this div, when one of the LINKS is clicked?

<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>

解决方案

You could subscribe for the .click event for the links and change the contents of the div using the .html method:

$('.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;
});

Note however that if you replace the contents of this div the click handler that you have assigned will be destroyed. If you intend to inject some new DOM elements inside the div for which you need to attach event handlers, this attachments should be performed inside the .click handler after inserting the new contents. If the original selector of the event is preserved you may also take a look at the .delegate method to attach the handler.

这篇关于更改div的内容-jQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆