JQuery - 刪除身體上添加的類點擊

查看下面的代碼片段或這個fiddler。我想實現從下段兩兩件事，那就是JQuery - 刪除身體上添加的類點擊

添加.myBackground類，而在.myDiv
點擊點擊body別處時，請取出.myBackground。

當我單獨嘗試它們時，它們工作得很好。但是，當我試圖讓他們兩個一起沒有按預期工作。我知道點擊我的div時點擊事件會被解僱，這就是爲什麼.myBackground沒有被添加。有沒有其他辦法可以達到我的要求？

$(document).ready(function() { 
 
    $(document).on('click', '.myDiv', function() { 
 
    $(this).addClass('myBackground'); 
 
    }); 
 
    $(document).on('click', 'body', function() { 
 
    $('.myDiv.myBackground').removeClass('myBackground'); 
 
    }) 
 
});

.myDiv { 
 
    height: 100px; 
 
    width: 100%; 
 
    background: cyan; 
 
} 
 

 
.myBackground { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myDiv"> 
 
</div>

讚賞任何幫助。提前致謝。

來源

2017-09-13 RaJesh RiJo

你有元素在你的身體，所以當你點擊它註冊兩個點擊，使用如果觸發刪除只有當元素不是.myBackground/myDiv元素

$(document).ready(function() { 
 
    $(document).on('click', '.myDiv', function() { 
 
    $(this).addClass('myBackground'); 
 
    }); 
 
    $(document).on('click', 'body', function(e) { 
 
    if (!$(e.target).is('.myBackground')) 
 
     $('.myBackground').removeClass('myBackground'); 
 
    }) 
 
});

body { 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 

 
.myDiv { 
 
    height: 100px; 
 
    width: 100%; 
 
    background: cyan; 
 
} 
 

 
.myBackground { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div class="myDiv"> 
 
    </div> 
 
</body>

來源

2017-09-13 07:10:21 madalinivascu

您需要通過添加

e.stopPropagation()

德，以阻止傳播，截止到身體活動水平莫

$(document).ready(function() { 
 
    $(document).on('click', '.myDiv', function(e) { 
 
    $(this).addClass('myBackground'); 
 
    e.stopPropagation() 
 
    }); 
 
    $(document).on('click', 'body', function() { 
 
    $('.myDiv.myBackground').removeClass('myBackground'); 
 
    }) 
 
});

body 
 
{ 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 

 
.myDiv { 
 
    height: 100px; 
 
    width: 100%; 
 
    background: cyan; 
 
} 
 

 
.myBackground { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div class="myDiv"> 
 
</div> 
 
</body>

來源

2017-09-13 07:10:23 gurvinder372

您需要添加e.stopProgation（）; some more info about it

var addBackground = function(e){ 
 
    e.stopPropagation(); 
 
    $('.myDiv').addClass('myBackground'); 
 
}; 
 

 
var removeBackground = function(){ 
 
    $('.myDiv.myBackground').removeClass('myBackground'); 
 
}; 
 

 
$(document).ready(function() { 
 
    $('.myDiv').on('click',addBackground); 
 
    $('body').on('click',removeBackground); 
 
});

.myDiv { 
 
    height: 100px; 
 
    width: 100%; 
 
    background: cyan; 
 
} 
 

 
.myBackground { 
 
    background: red; 
 
} 
 

 
body 
 
{ 
 
    height: 1000px; 
 
    width: 100%; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<body> 
 
<div class="myDiv"> 
 
</div> 
 
</body>

來源

2017-09-13 07:14:46 Steven

$(function(){ 
 

 
\t $(document).on('click', 'body', function(e) { 
 
\t  if ($(e.target).hasClass('myBackground')) 
 
\t   $('.myDiv').removeClass('myBackground'); 
 
\t  else if ($(e.target).hasClass('myDiv')) 
 
\t   $('.myDiv').addClass('myBackground'); 
 
\t }); 
 
\t 
 
});

body { 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 

 
.myDiv { 
 
    height: 100px; 
 
    width: 100%; 
 
    background: cyan; 
 
} 
 

 
.myBackground { 
 
    background: red; 
 
}

<div class="myDiv"></div> 
 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

試試這個

$(function(){ 

    $(document).on('click', 'body', function(e) { 
     if ($(e.target).hasClass('myBackground')) 
      $('.myDiv').removeClass('myBackground'); 
     else if ($(e.target).hasClass('myDiv')) 
      $('.myDiv').addClass('myBackground'); 
    }); 

});

來源

2017-09-13 07:28:46

JQuery - 刪除身體上添加的類點擊

回答

相關問題