I use PHP and javascript via prototype. i have a threaded comments page that on open by default via javascript call to a PHP file data returned via JSON, only parent comments are retrieved in the db. (in short only parent comments are fetched from db and displayed) then the parents are loaded and formatted to be shown on the page with a link to get and display its child comments, link example:
我通过原型使用PHP和javascript。我有一个线程评论页面,默认情况下通过javascript调用打开通过JSON返回的PHP文件数据,只在db中检索父评论。 (简而言之,只有父级注释从db中获取并显示)然后父项被加载并格式化,以显示在页面上,并带有获取和显示其子注释的链接,链接示例:
<span id="moreparent8351" onclick="insertChildDiv('parent8351')">1 Replies and more</span>
the span link above calls the javascript function "insertChildDiv()" that basically gets comments whose parent_id=parent8351, also using a PHP file that returns data via JSON to the javascript that dynamically inserts this child comments nested under its parent comment. then the span link above using prototype transforms into:
上面的span链接调用javascript函数“insertChildDiv()”,它基本上获取其parent_id = parent8351的注释,也使用通过JSON返回数据的PHP文件到动态插入嵌套在其父注释下的子注释的javascript。然后上面使用原型的span链接转换为:
<span id="moreparent8351" onclick="$('childparent8351').toggle()">1 Replies and more</span>
now here is the problem, this inserted content inside this div with id=childparent8351 wont respond to the hide/show toggle ONLY in IE v6,v7 and v8. other browsers work fine. it looks like IE cannot apply the hide/show toggle to a dynamically inserted content. I tried hardcoding the inserted content that i see in fogbugz to the page and testing it again on IE, guess what? toggle works!
现在这里是问题,这个div中插入的内容id = childparent8351不会仅在IE v6,v7和v8中响应隐藏/显示切换。其他浏览器工作正常。看起来IE无法将隐藏/显示切换应用于动态插入的内容。我尝试将我在fogbugz中看到的插入内容硬编码到页面并在IE上再次测试,猜猜怎么着?切换工作!
I dont want to fetch all the comments both parent and child and then hide the child comments, that is a waste of resources on something that we are not sure is important or to be read by the users.
我不想获取父母和孩子的所有评论,然后隐藏孩子评论,这是浪费资源,我们不确定是重要的还是由用户阅读。
Is there a workaround? if there is none, then i hope this post will help others on their design stage for something similar.
有解决方法吗?如果没有,那么我希望这篇文章能帮助其他人在他们的设计阶段做类似的事情。
1 个解决方案
#1
Element.toggle() should work fine with dynamically generated content. Your problem most likely lies within the method you use to generate this content.
Element.toggle()应该可以与动态生成的内容一起使用。您的问题很可能在于您用于生成此内容的方法。
You stated:
then the span link above using prototype transforms into:
然后上面使用原型的span链接转换为:
<span id="moreparent8351" onclick="$('childparent8351').toggle()">1 Replies and more</span>
How exactly are you changing the onclick attribute of the span element?
你究竟是如何更改span元素的onclick属性的?
First of all, I definately would not recommend changing an onclick event on-the-fly. It is probably better to use one function that checks the current state of what you are trying to do and executes the appropriate code.
首先,我肯定不会建议即时更改onclick事件。最好使用一个函数来检查您尝试执行的操作的当前状态并执行相应的代码。
Be sure not to "transform" your span element, including the onclick attribute using innerHTML. Chances are the DOM is still trying to reference a function that you have just removed. If updating your onclick attribute at all, do it like this:
一定不要使用innerHTML“转换”你的span元素,包括onclick属性。有可能DOM仍在尝试引用您刚刚删除的函数。如果要更新onclick属性,请执行以下操作:
var element = $('moreparent8351');
// this automatically removes previous onclick handlers set in this manner
element.onclick = function() { // do stuff };
...or, when you want to it the Prototype way:
......或者,当你想要原型时:
var element = $('moreparent8351');
// OPTIONAL: remove previous handler, if set
element.stopObserving('click', my_cool_function());
// attach new handler
element.observe('click', function() { // do stuff });
#1
Element.toggle() should work fine with dynamically generated content. Your problem most likely lies within the method you use to generate this content.
Element.toggle()应该可以与动态生成的内容一起使用。您的问题很可能在于您用于生成此内容的方法。
You stated:
then the span link above using prototype transforms into:
然后上面使用原型的span链接转换为:
<span id="moreparent8351" onclick="$('childparent8351').toggle()">1 Replies and more</span>
How exactly are you changing the onclick attribute of the span element?
你究竟是如何更改span元素的onclick属性的?
First of all, I definately would not recommend changing an onclick event on-the-fly. It is probably better to use one function that checks the current state of what you are trying to do and executes the appropriate code.
首先,我肯定不会建议即时更改onclick事件。最好使用一个函数来检查您尝试执行的操作的当前状态并执行相应的代码。
Be sure not to "transform" your span element, including the onclick attribute using innerHTML. Chances are the DOM is still trying to reference a function that you have just removed. If updating your onclick attribute at all, do it like this:
一定不要使用innerHTML“转换”你的span元素,包括onclick属性。有可能DOM仍在尝试引用您刚刚删除的函数。如果要更新onclick属性,请执行以下操作:
var element = $('moreparent8351');
// this automatically removes previous onclick handlers set in this manner
element.onclick = function() { // do stuff };
...or, when you want to it the Prototype way:
......或者,当你想要原型时:
var element = $('moreparent8351');
// OPTIONAL: remove previous handler, if set
element.stopObserving('click', my_cool_function());
// attach new handler
element.observe('click', function() { // do stuff });