c# - 我可以使用 javascript 移动 div 并保留其回发能力吗？

Question

我的页面中有一个复选框列表和一个带有 OnClick 事件的 ImageButton，单击 ImageButton 执行回发并正常运行 OnClick 事件

问题是我想将 div 移动到 <form> 的第一个 child 这样我就可以让它出现在模式窗口中 - 我已经使用 prototype.js 代码完成了这个......

document.observe("dom:loaded", function() {

    if ($$('.CheckboxListContainer').length>0) {    

        var modalShadow = document.createElement('div');
        modalShadow.setAttribute( "class", 'MyFormModalShadow' );

        modalShadow.style.width = document.viewport.getWidth() + 'px';
        modalShadow.style.height = document.viewport.getHeight() + 'px';

        var modalDiv = document.createElement('div');
        modalDiv.setAttribute( "class", 'MyFormModal' );

        var checkboxesDiv = $$('.CheckboxListContainer')[0];
        checkboxesDiv.remove();

        modalDiv.appendChild( checkboxesDiv );

        $$('form')[0].insert( {top: modalShadow} );
        $$('form')[0].insert( {top: modalDiv} );

        Event.observe(window, "resize", function() {
            if ($$('.MyFormModalShadow').length>0) {
                var modalShadow = $$('.MyFormModalShadow')[0]
                modalShadow.style.width = document.viewport.getWidth() + 'px';
                modalShadow.style.height = document.viewport.getHeight() + 'px';
            }
        });

    }

});

... 效果很好，但 ImageButton 不再在回发时触发我的 OnClick 事件。

有没有办法在 DOM 中移动我的 div 并保留其回发能力？

Answer 1

快速回答，是的。长答案如下:

如果您使用的是 ASP.NET WebForms，您的表单是否有 runat="server"属性和ID？如果您使用的是标准 HTML，是 method和 action在表单上设置属性？

当您在浏览器中查看 HTML 源代码时，如果表单如下所示:<form action="/your_post_back_page.html" method="post"> ，那一切都很好。添加模式对话框后，用 FireBug 检查表单，看看它是否在表单标签内。如果是这样，那很好。

勾选复选框 <input type="checkbox" />有一个name属性集？是你的图片按钮<input type='submit' />还是 <button> ？

如果满足这些条件，则可能有一个连接到您的按钮的 JavaScript 事件(函数)返回 false 和/或吞没了回发。 JavaScript onclick事件一般需要返回true才能提交表单。您的浏览器的错误控制台中是否有任何输出？

就我个人而言，我发现越来越多的纯 HTML(通过 ASP.NET MVC)比老式的 ASP.NET WebForms 更胜一筹，而且根据我的经验，jQuery 的感觉比原型(prototype)好得多。使用 jQuery 模板创建模态对话框会很容易。可以交换库吗？