요소의 유형이 다르더라도 심각한 문제가 발생할 수 있습니다 …

동일한 ID를 가진 3 개의 버튼이 있다고 가정하십시오.

<button id="myid" data-mydata="this is button 1">button 1</button>
<button id="myid" data-mydata="this is button 2">button 2</button>
<button id="myid" data-mydata="this is button 3">button 3</button>

이제 버튼을 클릭 jQuery했을 때 어떤 작업을 수행하도록 코드를 설정했습니다 myid.

$(document).ready(function ()
{
    $("#myid").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interestingFunction();

        $('form').trigger('submit');
    });
});

당신은 무엇을 기대합니까? 클릭 한 모든 버튼은 jQuery로 클릭 이벤트 핸들러 설정을 실행합니다. 불행히도 그것은 일어나지 않을 것입니다. 첫 번째 버튼 만 클릭 핸들러를 호출합니다. 클릭 할 때 다른 2는 아무것도하지 않습니다. 마치 버튼이 아닌 것처럼 보입니다!

따라서 항상 요소에 다른 IDs것을 지정하십시오 HTML. 이것은 이상한 것들로부터 당신을 덮을 것입니다. 🙂

<button id="button1" class="mybtn" data-mydata="this is button 1">button 1</button>
<button id="button2" class="mybtn" data-mydata="this is button 2">button 2</button>
<button id="button3" class="mybtn" data-mydata="this is button 3">button 3</button>

버튼을 클릭 할 때 click 이벤트 핸들러를 실행하려면 jQuery 코드에서 선택기 CSS를 다음과 같이 적용된 클래스 를 사용하도록 변경하면 완벽하게 작동합니다 .

$(document).ready(function ()
{
    $(".mybtn").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interstingFunction();

        $('form').trigger('submit');
    });
});

답변

<div class="myclass sexy"></div>

<div id="unique">One</div>
<div id="unique">Two</div>

<div id="unique" id="unique-also">One</div>

<div id="unique unique-two">Two</div>