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

Question

按下“removeclass”按钮时出现问题。删除按钮应该删除一个按钮。它会这样做，但按钮也会被按下，这是不应该发生的，并且会改变视频播放器的时间。

如何在删除之前禁用该按钮？我试过使用 .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

//You should to use e.preventDefault(); at first line of function asfollowing.

//Please try and let me know if not fixed.  

$("body").on("click",".removeclass", function(e){ 
    e.preventDefault(); // Please add this line here
    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();
    }
});

Answer 2

精简原始代码以演示问题：
“按钮”操作处理程序（放置在<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> 和 <input> 的 ID 是相同的。这不应该是这样。此外，您不要在 HTML 中为这些 ID 加上双引号。因此，根据传递给createButton 的内容，HTML 可能无效。