javascript - jQuery 问题。尝试使用 remove() 时单击了按钮

Question

按下“删除类”按钮时出现问题。删除按钮应该删除一个按钮。它执行此操作，但也按下了按钮，这是不应该发生的，并且会更改视频播放器时间。

如何在删除前禁用按钮？我曾尝试使用 .prop("disabled", true) 但没有成功。

 //remove button function
$("body").on("click",".removeclass", function(e){ 
    var site = document.URL;
    if (site.includes('#')) {
        site = site.substring(0, site.length - 1);
    }
    $(this).parent('div').children().prop("disabled", true);
    timearray = JSON.parse(localStorage.getItem(site));
    timepoint = parseInt($(this).parent('div').attr("id"), 10);
    var index = timearray.indexOf(timepoint);
    if (index > -1) {
        timearray.splice(index, 1);
        localStorage.setItem(site, JSON.stringify(timearray));
        console.log(JSON.parse(localStorage.getItem(site)));
        $(this).parent('div').remove();
    }
});

//Creates button
function createButton(timepoint) {
    var dispTime = convertTime(parseInt(timepoint, 10));
    var r = $('<div id='+ timepoint + ' style="float: left"> <input type="button"  ID='+ timepoint + ' value=' + dispTime + '> <a href="#" class="removeclass">Remove</a> </div>');
    timepoint = parseInt(timepoint, 10);
    r.click(function() {
        $('video').get(0).currentTime = timepoint;
    });

    $("#watch-headline-title").append(r);
}

Answer 1

简化原始代码以演示问题:
“按钮”操作处理程序(位于 <div> 上)在 .removeclass 之前被调用处理程序:

//Removed lines not needed to demo problem
//Changed HTML to give unique IDs to the <div> and <input>

//remove button function
$("body").on("click",".removeclass", function(e){ 
    console.log('In .removeclass click handler.');
    $(this).parent('div').children().prop("disabled", true);
    console.log('Removing');
    $(this).parent('div').remove();
});

//Creates button
function createButton(timepoint) {
    var dispTime = timepoint; //changed for testing convertTime() not provided
    var r = $('<div id='+ timepoint + ' style="float: left"> <input type="button"  ID='+ timepoint + ' value=' + dispTime + '> <a href="#" class="removeclass">Remove</a> </div>');
    r.click(function(e) {
        console.log('In <div> "button" click handler.');
    });
    $("#watch-headline-title").append(r);
}
createButton('the-Div-button');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="watch-headline-title"></div>

最简单的解决方案是将“按钮”事件处理程序放在 <input> 上而不是 <div> .

您可以通过更改行来做到这一点:

r.click(function() {

到

r.find('input').click(function() {

当你这样做时，只有 .removeclass单击删除时调用处理程序:

//Removed lines not needed to demo problem
//Changed HTML to give unique IDs to the <div> and <input>

//remove button function
$("body").on("click",".removeclass", function(e){ 
    console.log('In .removeclass click handler.');
    $(this).parent('div').children().prop("disabled", true);
    console.log('Removing');
    $(this).parent('div').remove();
});

//Creates button
function createButton(timepoint) {
    var dispTime = timepoint; //changed for testing convertTime() not provided
    var r = $('<div id='+ timepoint + ' style="float: left"> <input type="button"  ID='+ timepoint + ' value=' + dispTime + '> <a href="#" class="removeclass">Remove</a> </div>');
    r.find('input').click(function(e) {
        console.log('In <input> "button" click handler.');
    });
    $("#watch-headline-title").append(r);
}
createButton('the-Div-button');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="watch-headline-title"></div>

注意:您分配给 <div> 的 ID和 <input>是相同的。事实并非如此。此外，不要在 HTML 中用双引号将这些 ID 括起来。因此，取决于传递给 createButton 的内容，HTML 可能无效。