js list添加元素_使用JQuery时重新加载Javascript和重新绑定元素

6ce44fdd067cd40f5b240999a224d682.png

我正在做一个简单的JQuery程序。我需要添加新行,并且每行中都有一个删除按钮。“删除”链接用于使用Ajax进行删除。对于我来说,使用JQuery Ajax函数添加一行没有问题。但是新添加的行中的“删除”链接不起作用。

我认为问题在于Javascript之前已加载而不是重新加载,因此Javascript忽略了新添加的元素。我要做的是再次重新加载javascript。

这是代码:

add_note = function(){

//alert("submit");

memo = $("#memo").val();

//alert(memo);

$.post('back.php',

{

todo: "add_note",

memo: memo,

},function(data){

$('#memo_list').append(data);

//Be careful here, reload the javascript code

//reload this function to delete

$('.delete_link').click(function(){

var item_id = $(this).attr("id");

$("#note_"+item_id).fadeOut(500);

$.post('back.php',

{

todo: "delete_note",

memo_id: item_id

},function(data){

//after delte do nothing

});

});

});

}

使用HTML、CSS、JavaScriptjQuery和Vue.js编写网站可以实现丰富的交互和动态效果。下面是一个简单的示例: HTML部分: ```html <!DOCTYPE html> <html> <head> <title>My Website</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <header> <h1>Welcome to My Website</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <main> <section> <h2>About</h2> <p>This is a brief description of my website.</p> </section> <section> <h2>Services</h2> <ul> <li>Web Design</li> <li>Graphic Design</li> <li>Front-end Development</li> </ul> </section> </main> <footer> <p>© 2021 My Website. All rights reserved.</p> </footer> <script src="jquery.min.js"></script> <script src="vue.min.js"></script> <script src="script.js"></script> </body> </html> ``` CSS部分(styles.css): ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; } nav { background-color: #666; color: #fff; padding: 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { display: inline; margin-right: 10px; } nav ul li a { color: #fff; text-decoration: none; } main { padding: 20px; } section { margin-bottom: 20px; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` JavaScript部分(script.js): ```javascript $(document).ready(function() { // jQuery代码 $('h1').click(function() { $(this).css('color', 'red'); }); }); new Vue({ el: 'main', data: { message: 'Hello Vue.js!' } }); ``` 在这个示例中,我们使用HTML创建了网站的基本结构,使用CSS样式化网站的外观,使用JavaScriptjQuery实现了一些交互效果,使用Vue.js实现了数据绑定和动态更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值