相关疑难解决方法(0)

我有一些代码,我循环遍历页面上的所有选择框,并将.hover事件绑定到它们,以便在它们的宽度上做一些麻烦mouse on/off.

这发生在页面准备就绪并且工作得很好.

我遇到的问题是,我在初始循环后通过Ajax或DOM添加的任何选择框都不会受到事件限制.

我找到了这个插件(jQuery Live Query Plugin),但在我用插件添加另外5k到我的页面之前,我想知道是否有人知道这样做的方法,无论是直接使用jQuery还是通过其他选项.

我有一个简单的bootstrap模式通过ajax填充.内容是由bootstrap插件Collapse制作的Accordion.如果我尝试检测hidden.bs.collapse(或任何其他可检测的事件),它将不会被触发.

http://jsfiddle.net/Diac/n2jm5cy8/

HTML

<!-- Button trigger modal -->
<a href="/echo/html/" data-remote="false" data-toggle="modal" data-target="#myModal">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body" id="modalbody">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

accordion.html(通过ajax加载)

<div class='panel-group' id='accordion'>
    <div class='panel panel-default' id='panel1'>
        <div class='panel-heading'>
            <h4 class='panel-title'>
                <a data-toggle='collapse' data-parent='#accordion' …

我想知道为什么.on在AJAX调用之后从未调用Jquery 来重新绑定我的提交按钮,因为on假设要替换.bind我无法理解这是问题所在.但我尝试了各种各样的东西,唯一有用的是用.bind而不是.on.

我的表单附加到下拉列表中,该列表将在单击时在表单中生成新数据.这是在AJAX Get调用上完成的,并且在成功时我选择了表单并使用:

$('#formname').on('submit',function(){})

然后我尝试了

$('#formname').on('submit','form', function(){})

诚然,我从一个从未回答过的问题中得到了上述内容. jQuery的Ajax的形状使用-的onsubmit

我也尝试将on submit附加到body元素,因为它不会随着$('.container').on('submit','#formname', function(){})这里建议的AJAX函数而改变: jquery绑定函数和ajax调用后的触发器

但那也被忽略了.然后我尝试将'submit'的类型替换为'button'然后分配.on('click', etc...,以防在表单到达DOM后无法重新绑定提交按钮.

但唯一有效的是打电话.bind,我迷失了,因为我想要使用正确的标准.我完成的代码看起来像这样,请注意.bind以前哪里有一个.on未被调用的代码.

<script type="text/javascript">
(function ($){
    $('select#<?php echo $dropdown; ?>').on('click', function(){
        var value = $(this).val();
        var form = 'form#<?php echo $gridName; ?>' 
        $.ajax({
            type: "GET",
            url: $(form).prop('action') ,
            data: { gg:value },
            dataType: "html",
            cache: false,
            success: function(htmlResponse){
                var src = $(form , htmlResponse);
                $('.page_1col_col1').html( …

我想在由 ajax 调用动态创建的元素上绑定一个事件。一些元素已经存在，并且在页面加载时会与它们绑定一个事件。但是当在 ajax 调用之后创建新元素时，新元素就会失去它们的绑定。

我搜索并找到了一个很好的解决方案。 ajax调用后不会触发Jquery事件

在这个问题中，“Jason Fingar”提出了两种解决方案来解决这个问题

• 第二种解决方案是使用 on 方法，但对我不起作用
• 第一种方法有效，但有些问题

这是他提出的第一个解决方案

“1）封装您的“绑定”代码并在页面加载时以及在相关元素添加回页面后立即调用它。例如：“

$(document).ready(function(){
// bind event handlers when the page loads.
bindButtonClick();
});

function bindButtonClick(){
$('.myClickableElement').click(function(){
    ... event handler code ...
});
}

function updateContent(){
$.ajax({
    url : '/ajax-endpoint.php',
    data : {'onMyWay' : 'toServer'},
    dataType : 'html',
    type : 'post',
    success : function(responseHtml){
        // .myClickableElement is replaced with new (unbound) html 
     element(s)
        $('#container').html(responseHtml);

        // re-bind event handlers to '.myClickableElement'
        bindButtonClick();  
    }
});
}

我面临什么问题？ 事件与新元素成功绑定，但对于旧元素或页面加载时加载的元素，事件绑定两次。这有什么问题？