相关疑难解决方法(0)

我得到以下结构: - 嵌套UL

<ul class="depth-one">
    <li>Category 1
        <ul class="depth-two">
            <li > Category 1.1</li>
            <li> Category 1.2</li>
            <li> Category 1.3</li>
        </ul>
    </li>
    <li> Category 2
        <ul class="depth-two">
            <li>Category 2.1</li>
            <li>Category 2.2</li>
            <li>Category 2.3</li>
        </ul>
    </li>
    <li>Category 3
        <ul class="depth-two">
            <li>Category 3.1</li>
            <li>Category 3.2</li>
            <li>Category 3.3</li>
        </ul>
    </li>
</ul>

我用CSS应用了一条规则:

ul{
    list-style: none;
    padding:0;
    margin:0;
}
.depth-one{
    display:block;
}
.depth-two{
    display:none;
}

只留下显示的MAIN类别.

$(document).ready(function() {
    $(".depth-one > li").click(function() {
        selector = $(this).find(' > .depth-two');
        if($(selector).css("display") == "none"){
            selector.slideDown(800);
        } else {
            selector.slideUp(800); …

我有一个名为name和attendance两列的表,这是一个单选按钮,我想实现每当我点击一行时,我得到该行的名称和出勤的值.问题是每当我点击一行时,事件就会触发两次,并显示两次名称.我在下面添加了代码

<table class="col-md-12 text-center">
    <tr>
        <th class="text-center">Name</th>
        <th class="text-center">Attendance</th>

    </tr>
    <tr class="" data-id='1'>
        <td>Md. Khairul Basar</td>
        <td class="form-inline table_attendance">
            <div class="form-check form-check-radio">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="exampleRadio"
                           id="exampleRadios1" value="option1">
                    <span class="form-check-sign"></span>
                    Present
                </label>
            </div>
            <div class="form-check form-check-radio">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="exampleRadio"
                           id="exampleRadios2" value="option2" checked>
                    <span class="form-check-sign"></span>
                    Absent
                </label>
            </div>
        </td>
    </tr>
</table>

以下是jQuery代码.

<script>

    $(document).ready(function () {
        $(".table_attendance").on('click', function () {
            var attendance = {
              name: $(this).closest("tr").find("td:nth-child(1)").text()
            }
        });
    });

</script>

我已经按照与此问题相关的其他答案添加了他们的解决方案,例如添加.off("click") …

当我运行此代码时，为什么 .body 事件首先触发？

document.addEventListener('click', function() {
  console.log('The document was clicked');
});

document.body.addEventListener('click', function() {
  console.log('The document body was clicked');
});

我需要在点击的特定div中选择并找到H2标签的html值,这是我现在正在尝试但无济于事:

单击.square时,我正在尝试运行此:

 $(this).find('h2').html();

这就是html的样子:

<div class="square" id="2"><h2>Title</h2><h3>Comment</h3></div>

我究竟做错了什么？

谢谢

在这个表中,行在jquery中有一个事件,当我在行中单击时执行它,行内部有一个div ...这些div也有一个事件,当我点击div时执行.但是当我点击div时也执行行的事件....

<table>
 <tr id="one">
  <td>
   <div id="two">
    Hellow world
   </div>
  </td>
 </tr>
</table>

所以,当我点击div时,我只想执行div的事件.怎么样？

JS FIDDLE DEMO

这里有一个子div在锚标签内,如何得到子div的click事件,例如如果用户点击具有类.press_me alert msg的div 得到显示,如果用户点击主div上的任何地方它应该重定向到相应的锚链接

HTML:

<a href="https://www.google.co.in"><div class="dv_child"> America <div class="press_me">click me</div></div></a>
 <a href="https://www.google.co.in" target="_blank"><div class="dv_child"> India <div class="press_me">click me</div></div></a>
<a href="https://www.google.co.in" target="_blank"><div class="dv_child"> Russia <div class="press_me">click me</div></div></a>
<a href="https://www.google.co.in" target="_blank"><div class="dv_child"> Germany <div class="press_me">click me</div></div></a>

JQUERY:

$(".press_me").on('click', function () {
    alert($(this).parent().html());
});

我有一个div元素，里面有一个input元素。我想在单击div. 它工作正常，但问题是：input也检测到“点击” ，我不想。

document.getElementById("foo").addEventListener('click', function(event) {
  alert();
  event.stopPropagation();
})

div {
  width: 300px;
  height: 300px;
  background-color: red;
}

<div id="foo">
<input>
</div>

我习惯使用jQuery来操作DOM,例如:

var mything = $("#mything");
mything.on("click", function() {
    mything.addClass("red");
    mything.html("I have sinned.");
});

但现在我想用Vanilla JavaScript做同样的事情.这可能吗？我该怎么做？

注意:此问题旨在成为有关Vanilla JavaScript DOM操作的综合资源.

已弃用的 CustomEvent.initCustomEvent() 如何替换以改进旧代码。