jQuery的事件不被解僱

進出口特林上獲取一個div通過Ajax 但加載的按鈕觸發一個jQuery的單擊事件事件確實諾伊火的時候我敕通過AjaxjQuery的事件不被解僱

dash.php

loded按鈕

<!DOCTYPE html> 
<html> 
<head> 
<title>aquatrol</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<!-- Bootstrap --> 
<script type="text/javascript" > 
function dash_refresh() { 

    var hr = new XMLHttpRequest(); 
    var url="dash_refresh.php"; 
    var stl="A"; 
    var vars="?STL="+stl; 
    var url_full=url+vars+"&t=" + Math.random(); 

    hr.open("GET",url_full,true); 

    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

    hr.onreadystatechange = function() { 
     if(hr.readyState == 4 && hr.status == 200) { 
      var return_data = hr.responseText; 
      document.getElementById("dash-content").innerHTML = return_data; 
     } 
    } 
    hr.send(); 
    document.getElementById("dash-content").innerHTML='<img src="img/ajax.gif" alt="Processing..." />'; 
} 

setInterval(function(){ 
     dash_refresh(); 
},10000); 
</script> 
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link href="css/font-awesome.min.css" rel="stylesheet" media="screen"> 



<!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="js/html5shiv.js"></script> 
    <![endif]--> 

<style type="text/css"> 
.btn-group[data-switch="true"] .btn.active { 
font-weight: bolder; 
} 

</style> 
</head> 
<body onload="javascript:dash_refresh();"> 
<a href="#" onclick="javascript:dash_refresh();" class="btn btn-primary pull-right">Refresh</a> 
<hr> 

<div class="container-fluid"> 
<div class="row-fluid" id="dash-content"> 
</div> 
</div> 



<script src="http://code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
$("[data-switch='true']").on("click", ".btn", function() { 
    var $this = $(this); 


    if (!$this.hasClass("btn-info")) { 
     $this.addClass("btn-info"); 
     var id=$this.attr('id'); 
    var value=$this.attr('value'); 
    alert("ID "+id+" Val "+value); 

     $this.siblings().removeClass("btn-info"); 

    } 
}); 
</script> 


</body> 
</html>

dash_refresh.php

<? 
//some php here 
?> 

<div class="container-fluid"> 
<div class="row-fluid"> 

<div class="span12 well" style="text-align:center;"> 


<div class="btn-group" data-switch="true" data-toggle="buttons-radio"> 
    <button type="button" class="btn btn-small btn-info active" id="12" value="A">Auto</button> 
    <button type="button" class="btn btn-small" id="12" value="1">On</button>    
    <button type="button" class="btn btn-small" id="12" value="0">Off</button>    

</div> 

</div> 
</div> 
</div>

請幫我解決這個問題？

來源

2013-05-10 user2370313

單擊事件問題看可以不click處理程序附加到[data-switch='true']如加載頁面時它不存在。你必須附加到#dash-content：

$('#dash-content').on('click', '[data-switch="true"] .btn', function() { 
    // your code 
});

來源

2013-05-10 14:43:16 billyonecan

謝謝它的工作！ – user2370313 2013-05-10 15:39:19

首先你的所有按鈕有相同的ID id="12"。你觸發點擊這些按鈕。這可能會導致問題。請更改它們。

<button type="button" class="btn btn-small btn-info active" id="12" .. 
<button type="button" class="btn btn-small" id="12 ...    
<button type="button" class="btn btn-small" id="12" ....

這是一個側面effect.For在@Billy答案

來源

2013-05-10 14:38:24

好sugesstion。但這不會導致Op有問題。 – 2013-05-10 14:46:00

Yup.This是一個副作用first.For點擊問題@比利已提供。所以我不打算在這裏複製同一行。 – 2013-05-10 14:47:39

它的作品，如果按鈕在頁面中，而不是通過Ajax調用， – user2370313 2013-05-10 15:30:14

jQuery的事件不被解僱

回答

相關問題