javascript - jquery 更改由 jquery 添加的内容

Question

我对 jquery 中的 onchange 事件有疑问。添加的事件不起作用

这是我的代码:

<script>
    
    jQuery("#select1").on('change',
            function(event)
            {       
              event.preventDefault();  
               jQuery.ajax({
                    type:'POST',
                    async: true,
                    cache: false,
                    url: '<?php echo Router::Url(array('controller' => 'XXX','admin' => TRUE, 'action' => 'onChangeSelect1Ajax'), TRUE); ?>',
                    success: function(response) {
                        
                        jQuery('#select2Position').empty().append(response);
                      
                    },
                  error: function(response) { 
                      
                    alert('error');  
                    },
                    data:{ idselect1 : this.value }
                });
                return false;
 
            }
    );


    jQuery("#select2").on('change',
            function(event)
            {       
              event.preventDefault();    
               jQuery.ajax({
                    type:'POST',
                    async: true,
                    cache: false,
                    url: '<?php echo Router::Url(array('controller' => 'XXX','admin' => TRUE, 'action' => 'onChangeSelect12Ajax'), TRUE); ?>',
                    success: function(response) {
                        
                        jQuery('#other').empty().append(response);
                      
                    },
                  error: function(response) { 
                      
                    alert('error');  
                    },
                    data:{ idselect1 : jQuery("#select1").value, idselect2 : this.value }
                });
                return false;
 
            }
    );


</script>

当我更改 select1 时，添加了 select2。但 select2 onchange 事件不工作。你能帮帮我吗？

谢谢

Answer 1

如果要动态添加 select2，则需要使用 event 委托(delegate)技术将 event 附加到它，如下所示:

jQuery(document).on('change',"#select2",
            function(event)
            {       
              event.preventDefault();    
               jQuery.ajax({
                    type:'POST',
                    async: true,
                    cache: false,
                    url: '<?php echo Router::Url(array('controller' => 'XXX','admin' => TRUE, 'action' => 'onChangeSelect12Ajax'), TRUE); ?>',
                    success: function(response) {

                        jQuery('#other').empty().append(response);

                    },
                  error: function(response) { 

                    alert('error');  
                    },
                    data:{ idselect1 : jQuery("#select1").value, idselect2 : this.value }
                });
                return false;

            }
    );

我相信它会解决您的问题。