javascript - Jquery onselect onchange 单选按钮值

Question

基于此示例:http://jsfiddle.net/RhnvU/我试图将单选按钮的值传递到本质上位于模式框内的区域。但事情是这样的，我也使用一个函数来显示下拉框的结果。

当我使用此代码时:

<script type="text/javascript">
$(function(){
    $('#rental input').on('change', function() {
       alert($('input[name=radioName]:checked', '#rental').val()); 
    });
});
</script>

然后将此代码放置在 div 内部以外的任何位置，它都可以正常工作:

echo ' <input type="radio" name="radioName" value="' . $rest . '" />' . $format_number . '<br>';

但是当我尝试将其放入此 div 时:

<div id="txtHint"></div>

这就是将 php 脚本的结果返回到该 div (id="txtHint") 中的方法，但它不起作用。我尝试修改 $('#rental 输入以匹配 txtHint div id 标记，但这似乎不起作用。那么我做错了什么？

谢谢

编辑

这是调用 api 并将数据返回到 txtHint div 的代码

   function showUser(str){
     if (str==""){
           document.getElementById("txtHint").innerHTML="";
           return;
     } 
     if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
     }
     else{ // code for IE6, IE5
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
     xmlhttp.onreadystatechange=function(){
       if (xmlhttp.readyState==4 && xmlhttp.status==200){
           document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
        xmlhttp.open("GET","api/api-test.php?q="+str,true);
        xmlhttp.send();
    }

Answer 1

根据您的评论，您正在尝试将事件附加到通过 ajax 响应注入(inject)的 HTML。

最初的 document.ready 代码将无法工作，因为这些元素实际上还不存在。有两种方法可以解决这个问题:

您可以在注入(inject) ajax 响应后附加事件:

$.get(url, function(resp){
  // insert the new div
  $('#rental input').change( // ...code here
});

或者您可以使用委托(delegate)来监听当前事件和新事件:

$('#rental').on('change', 'input', function() {

(假设id="rental"已经在页面上。重点是将委托(delegate)事件附加到一个恒定的容器，它总是在页面上。有些人只是使用body 对于重型 Ajax 页面)