测试页面：http://www.i-cre8.com/test-files/stackoverflow/access-changed-button.html
单击Unarchive按钮后，我将其属性更改为Archive按钮，但当您再次单击它时，它不会按预期淡出表行，它实际上仍然表现为Unarchive按钮。
在jQuery中，我会使用.on（'click'，...来访问动态更改的元素，如何在本机JavaScript中实现这一点？
示例代码：
<table border="1" class="i8_zebra">
<thead>
<tr>
<th>Quote #</th>
<th>Date</th>
<th>Client</th>
<th>Sub Total</th>
<th>Shipping</th>
<th>Install</th>
<th>Misc. Charges</th>
<th>Customer Savings</th>
<th>Tax</th>
<th>Grand Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr data-id="206">
<td class="textCenter"><a href="/salesplustools/quotes/details/206">206</a></td>
<td class="textCenter">March 8th, 2015</td>
<td>Matthew Ward 123 Magnolia St Hempstead NY 11550-1234</td>
<td class="textRight">$6849.96</td>
<td class="textRight">$50.00</td>
<td class="textRight">$100.00</td>
<td class="textRight">$0.00</td>
<td class="textRight"><span class="hilite-red">-$750.00</span></td>
<td class="textRight">0.00</td>
<td class="textRight">$6249.96</td>
<td class="textCenter"><input class="btn btn-sm btn-gray" type="button" name="row_Delete_206" value="Archive Quote" data-id="206"></td>
</tr>
<tr data-id="204">
<td class="textCenter"><a href="/salesplustools/quotes/details/204">204</a></td>
<td class="textCenter">March 5th, 2015</td>
<td>Matthew Ward 123 Magnolia St Hempstead NY 11550-1234</td>
<td class="textRight">$2199.98</td>
<td class="textRight">$80.00</td>
<td class="textRight">$0.00</td>
<td class="textRight">$0.00</td>
<td class="textRight"><span class="hilite-red">-$255.00</span></td>
<td class="textRight">131.62</td>
<td class="textRight">$2156.60</td>
<td class="textCenter"><input class="btn btn-sm btn-blue" type="button" name="row_Add_204" value="Unarchive Quote" data-id="204"></td>
</tr>
<tr data-id="203">
<td class="textCenter"><a href="/salesplustools/quotes/details/203">203</a></td>
<td class="textCenter">March 5th, 2015</td>
<td>Matthew Ward Apt C 5800 Springfield Gardens Springfield VA 22162-1058</td>
<td class="textRight">$5099.97</td>
<td class="textRight">$80.00</td>
<td class="textRight">$0.00</td>
<td class="textRight">$0.00</td>
<td class="textRight"><span class="hilite-red">-$350.00</span></td>
<td class="textRight">311.12</td>
<td class="textRight">$5141.09</td>
<td class="textCenter"><input class="btn btn-sm btn-blue" type="button" name="row_Add_203" value="Unarchive Quote" data-id="203"></td>
</tr>
<tr data-id="127">
<td class="textCenter"><a href="/salesplustools/quotes/details/127">127</a></td>
<td class="textCenter">December 30th, 2014</td>
<td>Matthew Ward Apt C 5800 Springfield Gardens Springfield VA 22162-1058</td>
<td class="textRight">$4898.99</td>
<td class="textRight">$0.00</td>
<td class="textRight">$0.00</td>
<td class="textRight">$0.00</td>
<td class="textRight"><span class="hilite-red">-$200.00</span></td>
<td class="textRight">0.00</td>
<td class="textRight">$4698.99</td>
<td class="textCenter"><input class="btn btn-sm btn-gray" type="button" name="row_Delete_127" value="Archive Quote" data-id="127"></td>
</tr>
<tr data-id="4">
<td class="textCenter"><a href="/salesplustools/quotes/details/4">4</a></td>
<td class="textCenter">September 15th, 2014</td>
<td>Matthew Ward Apt C 5800 Springfield Gardens Springfield VA 22162-1058</td>
<td class="textRight">$6348.98</td>
<td class="textRight">$0.00</td>
<td class="textRight">$0.00</td>
<td class="textRight">$0.00</td>
<td class="textRight"><span class="hilite-red">-$0.00</span></td>
<td class="textRight">0.00</td>
<td class="textRight">$6348.98</td>
<td class="textCenter"><input class="btn btn-sm btn-blue" type="button" name="row_Add_4" value="Unarchive Quote" data-id="4"></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// <![CDATA[
// fade out see http://www.chrisbuttery.com/articles/fade-in-fade-out-with-javascript/
function fadeOut(el){
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
}
var archiveQuote = function(event) {
event.preventDefault(); // we don't want the link to be followed (default browser behavior)
var target = event.target; // get the event target (what `this` would refer to in jQuery)
var pkID = target.getAttribute('data-id'); // the id we need to pass for archiving
var parent = target.closest('tr'); // find the table row that we need to remove
target.blur(); // clear focus
var nm = target.getAttribute('name'); // the name of the button pressed
console.log(nm);
// fade out row
fadeOut(parent);
}
var unarchiveQuote = function(event) {
event.preventDefault(); // we don't want the link to be followed (default browser behavior)
var target = event.target; // get the event target (what `this` would refer to in jQuery)
var pkID = target.getAttribute('data-id'); // the id we need to pass for unarchiving
target.blur(); // clear focus
var nm = target.getAttribute('name'); // the name of the button pressed
console.log(nm);
// change button
var btnName = target.getAttribute('name');
target.classList.remove('btn-blue');
target.classList.add('btn-gray');
target.value = 'Archive Quote';
target.setAttribute('name', btnName.replace('_Add_','_Delete_'));
}
var btnArchive = document.querySelectorAll('[name^="row_Delete_"]');
for(var i = 0; i < btnArchive.length; i++) { // loop thru all elements starting with...
btnArchive[i].addEventListener( 'click', function(event) {
archiveQuote.call(this, event);
}, false);
}
var btnUnarchive = document.querySelectorAll('[name^="row_Add_"]');
for(var i = 0; i < btnUnarchive.length; i++) { // loop thru all elements starting with...
btnUnarchive[i].addEventListener( 'click', function(event) {
unarchiveQuote.call(this, event);
}, false);
}
// ]]>
</script>
答案 0 :(得分：1)
您需要将存档功能附加到更改为“存档”的按钮，例如（https://jsfiddle.net/krsmhLav/）：
var unarchiveQuote = function(event) {
...
target.setAttribute('name', btnName.replace('_Add_','_Delete_'));
*target.addEventListener( 'click', function(event) {
archiveQuote.call(this, event);
}, false);*
}