Question

我在一个页面上有多个div而我正在尝试显示我点击的ID的点击

这是我的HTML代码

<div id="div1" class="Mydiv">
    Abcd
</div>
<div id="div2" class="Mydiv">
    EFGH
</div>
<div id="div3">
    IJKL
</div>

这是我的jQuery代码

$(document).ready(function () {
    $(this).click(function () {
        debugger;
        alert($(this).attr('id'));        
    })
})

但是当我执行它时，它会在警告框中显示未定义而不是Id 请帮助我。

Answer 1

您需要使用$(document).on('click','div', function () {...});才能使其正常运行。甚至$('div').click(function(){..})也会这样做。这会在click元素上添加div个事件，点击后，您可以使用id获取div的{{1}}。

$(this).attr('id')

$(document).ready(function () {
    $(document).on('click','div', function () {
        alert($(this).attr('id'));        
    })
})

Answer 2

而不是$(this)使用元素或选择器。因为在上面绑定的代码this中，click事件没有id属性。在这里，我将div上的click事件绑定了id属性，同样可以绑定其他元素，类和ID上的事件。

$(document).ready(function () {
  $('div').click(function () {
    alert($(this).attr('id'));        
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="Mydiv">
  Abcd
</div>
<div id="div2" class="Mydiv">
  EFGH
</div>
<div id="div3">
  IJKL
</div>

Answer 3

这是一个例子

$(document).ready(function () {
                $(this).click(function (event) {
                     var source = event.target || event.srcElement; 
                     console.log($(source).attr('id'))
                })
            })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="Mydiv">
        Abcd
    </div>
        <div id="div2" class="Mydiv">
        EFGH
    </div>
        <div id="div3">
        IJKL
    </div>

Answer 4

当您使用$(document).ready ()时，this将代表document。因此id将是未定义的（文档没有属性id）。您需要直接将click-event-handler添加到<div>代码中。之后，您可以使用id获取$(this).prop ('id')。以下是一个代码段：

$(document).ready (function () {

  //add the event-handler to your div's
  $('div').click (function () {
  
    alert ($(this).prop ('id'));
  
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="Mydiv">
    Abcd
</div>
    <div id="div2" class="Mydiv">
    EFGH
</div>
    <div id="div3">
    IJKL
</div>

Answer 5

＆＃13;

model.getId()

＆＃13;

$(document).ready(function () {
  $('div').on('click' ,function () {
    alert($(this).attr('id'));        
  })
})

＆＃13;

如何显示在AlertBox中单击的Div的ID

5 个答案: