Jquery Select button (s) bên trong div

Question

Tôi muốn chọn một nhóm nút cụ thể tồn tại bên trong DIV và gán ID của họ cho một trường ẩn trên trang nhưng tôi không thể chọn được các nút bên trong div .. Ví dụ thất bại dưới

NGUỒN HTML

<div id = test> 
    <div class="ButtonGroupWrapper">      
        <img src="test.jpg" width="100" height="100" alt="thumbnail" /> 
       <input id="buttonID5" type="submit" value="Link" class="button" /> 
    </div> 
    <div class="ButtonGroupWrapper">      
        <img src="test.jpg" width="100" height="100" alt="thumbnail" /> 
       <input id="buttonID6" type="submit" value="Link" class="button" /> 
    </div> 
    </div> 

jquery selector không

$(".ButtonGroupWrapper").find(":button").click(function() { 
     alert("hi there"); 
     return false; 
    }); 

    $("#ButtonGroupWrapper input[type=button]").click(function() { 
     alert("hi there"); 
     return false; 
    }); 

    $("#ButtonGroupWrapper :button").click(function() { 
     alert("hi there"); 
     return false; 
    }); 

Answer 1

Hãy thử:

$(".ButtonGroupWrapper").find(".button").click(function() { 
     alert("hi there"); 
     return false; 
}); 

ví dụ đầu tiên của bạn không thành công vì bạn đang cố gắng để nhắm mục tiêu một lớp mà là trước bởi . không :. Bạn cũng có thể đang cố nhắm mục tiêu phần tử của nút loại nhưng phần tử được đề cập là loại gửi.

Ví dụ thứ hai của bạn không thành công vì bạn đang cố gắng chọn đầu vào của nút loại khi không tồn tại (mục tiêu của bạn là loại gửi). Một giải pháp thay thế sẽ là input[type=submit].

Ví dụ thứ ba của bạn không thành công vì lý do tương tự với ví dụ đầu tiên thất bại ở chỗ nó tìm kiếm phần tử của nút loại.

cũng Xem http://api.jquery.com/button-selector/

Answer 2

này sẽ làm việc:

$(".ButtonGroupWrapper").find(".button").click(function() { 
    alert("hi there"); 
    return false; 
}); 

Answer 3

Đưa một không gian tìm kiếm bất kỳ lớp .button trong lớp .ButtonGroupWrapper của bạn. (Chú ý: không bất kỳ 'nút', nhưng bất cứ điều gì với class = "nút" mã được thêm vào nó)

$(".ButtonGroupWrapper .button").click(function() { 
    alert("hello"); 
    return false; 
}); 

Trong HTML của bạn nộp đầu vào có một 'lớp' của 'nút'. Nó thực sự có thể là bất cứ thứ gì như .strawberry hoặc .mybutton hoặc bất kỳ thứ gì bạn thích.

Alternative:

Như bạn có một id gói toàn bộ rất nhiều bạn cũng có thể nút trong id nhắm mục tiêu:

<div id ="test"> 
    <div>      
    <img src="test.jpg" width="100" height="100" alt="thumbnail" /> 
    <input type="submit" value="Link" class="button" /> 
    </div> 
    <div>      
    <img src="test.jpg" width="100" height="100" alt="thumbnail" /> 
    <div class="button" />Just text</div> 
    </div> 
</div> 

Và rồi javascript của bạn có thể là:

$("#test .button").click(function() { 
    alert("button class clicked"); 
    return false; 
}); 

Hãy nhớ rằng bạn cần phải chạy điều này sau khi DOM đã tải, vì vậy thực hành tốt nhất là viết nó ở cuối trang hoặc quấn i t trong chức năng onready yêu thích của bạn.