問(wèn)題描述

需求：一個(gè)列表，每列都有一個(gè)“修改”按鈕，點(diǎn)擊修改按鈕后可以彈出一個(gè)textarea來(lái)填寫內(nèi)容并保存到對(duì)應(yīng)的列表中疑問(wèn)：如果使用循環(huán)每次在保存第二個(gè)列表的修改內(nèi)容時(shí)，會(huì)把前一個(gè)修改過(guò)的列表內(nèi)容覆蓋掉。代碼：html

<ul> <li><p>添加備注</p><span style='color: red'>修改</span></li> <li><p>添加備注</p><span style='color: red'>修改</span></li> <li><p>添加備注</p><span style='color: red'>修改</span></li></ul><p style='display: none;'></p><p style='display: none; border: 1px solid blue;'> <textarea name='' id='' cols='30' rows='10' class='text'></textarea> <input type='button' value='sure' class='sure'> <input type='button' value='close' class='close'></p>

jQuery，方法-1

$(’li’).on(’click’, ’span’, function() { var me = $(this); $(’#mask’).show(); $(’#edit’).show(); $(’.text’).val(’’); $(’.sure’).on(’click’, function() {$(’#mask’).hide();$(’#edit’).hide();var text = $(’.text’).val();// 這里如果 find(’p’)，會(huì)把之前修改過(guò)的P的text也替換了,目前我的替代方法就是去掉 find(’p’)me.parent().find(’p’).html( text + ’<span style='color: red'>修改</span>’ ); });});

方法2：循環(huán)處理，同樣會(huì)出現(xiàn)覆蓋掉前一次修改過(guò)的內(nèi)容

$(’li’).each(function(index) { alert(index) $(this).find(’span’).on(’click’, function() {var me = $(this);$(’#mask’).show();$(’#edit’).show();$(’.text’).val(’’);$(’.sure’).on(’click’, function() { $(’#mask’).hide(); $(’#edit’).hide(); var text = $(’.text’).val(); me.parent().find(’p’).html( text ); // alert(index)}); });});

這個(gè)問(wèn)題已經(jīng)折騰了很久，雖然找到了一個(gè)替代方案，但覺(jué)得這個(gè)方案不是很好，如果后期html有改動(dòng)的話，就沒(méi)法用了，但用each來(lái)循環(huán)取index索引值，然后this又有問(wèn)題，反復(fù)試了各種辦法也不行，實(shí)在是不知道錯(cuò)哪里了，希望有人給指點(diǎn)一點(diǎn)。謝謝大家了

問(wèn)題解答

var me;$(’li’).on(’click’, ’span’, function() { me = $(this); $(’#mask’).show(); $(’#edit’).show(); $(’.text’).val(’’);});$(’.sure’).on(’click’, function() { $(’#mask’).hide(); $(’#edit’).hide(); var text = $(’.text’).val(); me.parent().find(’p’).html( text + ’<span style='color: red'>修改</span>’ );});

改成這樣就好了。

或者

$(’li’).on(’click’, ’span’, function() { var me = $(this); $(’#mask’).show(); $(’#edit’).show(); $(’.text’).val(’’); $(’.sure’).off(’click’); $(’.sure’).on(’click’, function() {$(’#mask’).hide();$(’#edit’).hide();var text = $(’.text’).val();me.parent().find(’p’).html( text + ’<span style='color: red'>修改</span>’ ); });});

因?yàn)槟惆?.sure 元素的 on 事件放在了 li span 的點(diǎn)擊事件，相當(dāng)于你每點(diǎn)擊一下 span，就會(huì)給 .sure 添加一個(gè)監(jiān)聽事件，所以每點(diǎn)一次就多響應(yīng)一次。

兩段代碼都有問(wèn)題啊。

你在一個(gè) click 事件里面綁定了另一個(gè) click，那么每次這個(gè)按鈕點(diǎn)擊的時(shí)候都會(huì)重復(fù)綁定這個(gè)事件的。

一個(gè)最簡(jiǎn)單但是不高效的解決方式就是：當(dāng)彈出關(guān)閉后，為按鈕解綁。

$(’.sure’).off(’click’);

https://jsfiddle.net/gLfsa02b/

差點(diǎn)被你帶溝里……這個(gè)不是 this 的問(wèn)題，而是因?yàn)槊看吸c(diǎn)擊 span 都會(huì)給 .sure 綁定一次事件，所以后來(lái)點(diǎn) .sure 的時(shí)候，觸發(fā)了 n 個(gè)事件，也包括之前的。所以你看到的效果就是之前的也被覆蓋了。

var me;$('li').on('click', 'span', function() { me = $(this); $('#mask').show(); $('#edit').show(); $('.text').val('');});$('.sure').on('click', function() { if (!me) {return; } $('#mask').hide(); $('#edit').hide(); var text = $('.text').val(); me.parent().find('p').html(text + ’<span style='color: red'>修改</span>’);});

https://jsfiddle.net/v5hnhfam/

多謝樓上幾位哥哥在端午放假期間能回答我的問(wèn)題，非常感謝你們，每個(gè)答案我都給我很多啟示，謝謝！！！但答案只能采納一個(gè)，我看了一下幾位哥哥的聲望，我就采納了 噢漏 的答案。謝謝！