我可以使用 javascript 移动 div 并保留其回发能力吗？
我的页面中有一个复选框列表和一个带有 OnClick 事件的 ImageButton，单击 ImageButton 会执行回发并正常运行 OnClick 事件
问题是我想将 div 移动为
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 并保留其回发功能？
I've got a list of checkboxes and an ImageButton with an OnClick event in my page, clicking the ImageButton performs a postback and runs the OnClick event fine
The trouble is that I want to move the div to be the first child of the <form> so that I can make it appear in a modal window - I've done this using the prototype.js code...
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';
}
});
}
});
... which works fine, but the ImageButton is no longer triggering my OnClick event on postback.
Is there a way to move my div around in the DOM and retain its postback abilities?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
快速回答，是的。下面是长答案：
如果您正在谈论 ASP.NET WebForms，您的表单是否具有
runat="server"属性和 id？如果您使用标准 HTML，是否在表单上设置了method和action属性？当您在浏览器中查看 HTML 源代码时，如果表单如下所示：
您的复选框
是否设置了name属性？您的图像按钮是还是如果满足这些条件，则可能有一个 JavaScript 事件（函数）连接到您的按钮，该事件返回 false 和/或吞噬回发。 JavaScript
onclick事件通常需要返回 true 才能提交表单。您的浏览器的错误控制台中有任何输出吗？就我个人而言，我越来越发现纯 HTML（通过 ASP.NET MVC）击败了老式 ASP.NET WebForms，而且根据我的经验，jQuery 的感觉比原型好得多。使用 jQuery 模板创建模式对话框会很容易。可以交换库吗？
Quick answer, yes. Long answer below:
If you're talking ASP.NET WebForms, does your form have the
runat="server"attribute and an id? If you're using standard HTML, are themethodandactionattributes set on the form?When you look at the HTML source in your browser, if the form looks like:
<form action="/your_post_back_page.html" method="post">, then that's all good. Inspect the form with FireBug after the modal dialog has been added, see if it is INSIDE the form tags. If so, that's good.Do your check boxes
<input type="checkbox" />have anameattribute set? Is your image button<input type='submit' />or is it a<button>?If these conditions are met, then there is probably a JavaScript event (a function) wired to your button that is returning false and/or swallowing the postback. JavaScript
onclickevents generally need to return true to submit a form. Is there any output in your browser's error console?Personally, I find more and more that pure HTML (by way of ASP.NET MVC) beats the pants off old school ASP.NET WebForms, and jQuery has, in my experience, a far nicer feel than prototype. Using jQuery templates to create a modal dialog would be easy. Can you swap libraries?
首先，我不太清楚为什么需要将元素移动到表单的第一个子元素以使其成为模态。无论表单中的位置如何，您都可以制作任何 div 模态。最重要的一点是控制好绝对定位。
每个回发均由 __DoPostBack() javascript 函数触发，因此移动控件不会出现任何问题，除非更改了控件的 id。
解决您的问题的一种可能的解决方案是从 document.ready 中的客户端代码调用 __DoPostBack() 函数，这样您就可以完全控制表单提交。
First of all, i am not very clear why you need to move the element to be the first child of the form to make it modal. You can make any div modal no matter where is the position in the form. The most important think is controlling the absolute positioning properly.
Each postback gets triggered by a __DoPostBack() javascript function, so you should not have any issues with moving the control around, unless you changed the id of the control.
One possible solution to your problem is calling the __DoPostBack() function from your client code in document.ready, and that way you have full control over the form submission.