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可能无效。

jQuery问题。尝试使用remove（）

2 个答案: