부트 스트랩 : 라디오 버튼이있는 팝업 팝업

사용자를위한 가이드를 만들고 응용 프로그램에서 특정 작업을 수행하라는 메시지를 표시합니다.부트 스트랩 : 라디오 버튼이있는 팝업 팝업

예를 들어, 특정 라디오 버튼을 클릭하면 다음 요소를 선택하라는 팝 오버가 표시됩니다.

HTML :

<label> 
    <input type="radio" name="venue_id[]" id="radio_venue_586" value="586" role="button" data-toggle="popover" /> ABC 
</label>

jQuery를 : 나는 이벤트의 다양한 다른 유형을 시도하고 아무도 지금까지 일하지 않은

$("[id^='radio_venue_" + venueID + "']").popover({ 
    placement: "top", 
    title: "Board & Occupancy", 
    content: "Please choose a board & occupancy for this venue", 
    container: ".venue-1-" + venueID 
});

예, 사용자가 라디오 버튼을 클릭하면 venueID이 값을 전달합니다.

$('input[name="venue_id[]"]').click(function(event) { 
    venueID = $(this).attr("value"); 

    // alert() works 
    alert(venueID); 

    // none of the following triggers 
    $('[id^="radio_venue_"]').popover({ 
     placement: "top", 
     title: "Board & Occupancy", 
     content: "Please choose a board & occupancy for this venue", 
     container: ".venue-1-" + venueID 
    }); 

    $("[id^='radio_venue_" + venueID + "']").popover({ 
     container: ".venue-1-" + venueID 
    }); 

});

라디오 버튼을 통해 팝업을 트리거 할 수 있습니까?

출처

2014-10-09 Wayne Smallman

라디오 버튼에 적절한 이벤트를 사용하고 popover를 호출합니까? – trainoasis

나는 내가 생각할 수있는 모든 것을 시도했지만 아무 일도 일어나지 않습니다. –

라디오 버튼에 Popover가 정상적으로 작동하는 것 같습니다. container 요소가 있는지 확인하십시오.

var venueID = 5; 
 

 
$('[id^="radio_venue_"]').popover({ 
 
    placement: "top", 
 
    title: "Board & Occupancy", 
 
    content: "Please choose a board & occupancy for this venue", 
 
    container: ".venue-1-" + venueID 
 
}); 
 

 

 
$("[id^='radio_venue_" + venueID + "']").popover({ 
 
    container: ".venue-1-" + venueID 
 
});

label { 
 
    margin-left: 50px; 
 
    margin-top: 120px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 

 
<label> 
 
    <input type="radio" name="venue_id[]" id="radio_venue_586" value="586" role="button" />ABC 
 
</label> 
 

 
<div class="venue-1-5"></div>

출처

2014-10-09 12:56:16 DavidG

내가 한 일을 복제 할 수 없기 때문에 나는 어딘가에 뭔가 틀린 것을 가지고있을 것입니다. –

나는 당신의 코드를 가져 와서 venueID가 선언되고 작동하지 않는 부분으로 옮겼습니다. 나는 또한 내가 가지고있는 것을 보여주기 위해 오프닝 포스트를 편집했다. 나는 신비화되었다. –

그래서 'venue_id []'요소를 클릭하면 라디오 버튼을 누르지 않고도 아무 것도 안 나옵니까? – DavidG

이 작업 데모 참조 : 브라우저 콘솔에서 오류 http://www.bootply.com/dxB6Rasx5m

$("[data-toggle=popover]").popover({ 
    placement: "top", 
    title: "Board & Occupancy", 
    content: "Please choose a board & occupancy for this venue", 
    trigger: "click" 
});

확인하고 venueID가 정의되어 있는지 확인하십시오. 또한 top 게재 위치는 입력이 다른 콘텐츠에 의해 푸시 다운되지 않는 경우 문제가 될 수 있습니다.

출처

2014-10-09 12:56:05 ZimSystem

내가 한 모든 시도에서 한 가지 오류를 보지 못했습니다. 또한이 방법은 효과가 없습니다. 선택할 수있는 호텔이 수백 개 있기 때문에 사용자가 선택한 ID 값을 사용하고 있습니다. –

100의 ID가 생성되기 전에 너무 일찍 popover를 바인딩하지 않았는지 확인하십시오. $ (document) .ready() 안에 .popover()가 있습니까? – ZimSystem

어떤 라디오 버튼이 붙어 있는지 알아 내려면 venueID가 필요합니다. 내가 게시물에서 말했듯이, venueID가 다가오고 있습니다. –

봅니다 라디오 버튼에 변경 이벤트를 설정합니다. 라디오 버튼의 값이 체크 된 경우 (: checked CSS3 의사 클래스에 의해 수행됨), popover를 수동으로 트리거하십시오.

부트 스트랩은 문자열 매개 변수로 show/hide/toogle/destroy 메소드를 제공합니다.

$("[id^='radio_venue_" + venueID + "']").change(
    function(){ 
     if ($(this).is(':checked')) { 
      $(this).popover('show'); 
     } 
    });

출처

2014-10-09 12:56:37

부트 스트랩 : 라디오 버튼이있는 팝업 팝업

답변

관련 문제