无法使用Javascript/Prototype访问innerHTML之前创建的元素 [英] Can't access Elements previously created by innerHTML with Javascript/Prototype

问题描述

我正在使用来自ajax请求的内容设置div的innerHTML变量:

I am setting the innerHTML variable of a div with contents from an ajax request:

new Ajax.Request('/search/ajax/allakas/?ext_id='+extid,
  {
    method:'get',
    onSuccess: function(transport){
      var response = transport.responseText || "no response text";
      $('admincovers_content').innerHTML=response;
    },
    onFailure: function(){ alert('Something went wrong...') }
  });

响应文本包含以下形式:

The response text cotains a form:

    <form id="akas-admin" method="post" action="/search/ajax/modifyakas/">
        <input type="text" name="formfield" value="i am a form field"/>
    </form>

然后我调用一个应提交该表格的函件:

Then I call a functiont that should submit that form:

$('akas-admin').request({
  onComplete: function(transport){ 
      //alert('Form data saved! '+transport.responseText)
        $('admincovers_content').innerHTML=transport.responseText;
      }
});

问题是 $('akas-admin)返回 null ，我试图将具有此id的表单放入原始文档中，有效.

The problem is $('akas-admin) returns null , I tried to put the form with this id in the original document, which works.

问题:我可以以某种方式重新验证" innerHTML插入的dom或访问元素吗?

Question: Can I somehow "revalidate" the dom or access elements that have been inserted with innerHTML?

编辑信息: document.getElementById("akas-admin").submit()正常工作，问题是我不想重新加载整个页面，而是将表单发布在ajax和在回调函数中获取响应文本.

Edit Info: document.getElementById("akas-admin").submit() works just fine, problem is i don't want to reload the whole page but post the form over ajax and get the response text in a callback function.

根据提供的答案，我用以下观察者替换了执行请求的函数:

Based on the answers provided, i replaced my function that does the request with the following observer:

Event.observe(document.body, 'click', function(event) {
  var e = Event.element(event);
  if ('aka-savelink' == e.identify()) {
      alert('savelink clicked!');
      if (el = e.findElement('#akas-admin')) {
        alert('found form to submit it has id: '+el.identify());
        el.request({
            onComplete: function(transport){ 
            alert('Form data saved! '+transport.responseText)
                $('admincovers_content').innerHTML=transport.responseText;
            }
        });
      }
  }
});

问题是我到了 alert('savelink click！');为止..findelement不返回表格.我试图将保存链接放在表格的上方和下方.两者都不起作用.我也认为这种方法有点笨拙，而且我做错了.谁能指出我正确的方向?

problem is that i get as far as alert('savelink clicked!'); . findelement doesnt return the form. i tried to place the save link above and under the form. both doesnt work. i also think this approach is a bit clumsy and i am doing it wrong. could anyone point me in the right direction?

推荐答案

所以 $('akas-admin')返回 null ，但 document.getElementById("akas-admin")不会. $ 函数主要只是 document.getElementById 的包装，因此这种情况不常见.您是否尝试过使用 Element.extend(document.getElementById('akas-admin'))?

So $('akas-admin') returns null but document.getElementById("akas-admin") does not. The $ function is mostly just a wrapper for document.getElementById so it's unusual for this to break down. Have you tried using Element.extend(document.getElementById('akas-admin'))?

您是否还加载了其他库?您可以在 jsFiddle 中重新创建问题吗?

Do you have any other libraries loaded? Can you recreate the problem in jsFiddle?

这篇关于无法使用Javascript/Prototype访问innerHTML之前创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！