Javascript Brython将单击事件绑定到尚未在页面中的id
因此,我面临以下困境: 我正在使用布莱顿,一切正常。我有一小段代码为我执行ajax请求,我在标题中添加了这段代码,以绑定页面中当前元素的所有内容Javascript Brython将单击事件绑定到尚未在页面中的id,javascript,python,html,brython,Javascript,Python,Html,Brython,因此,我面临以下困境: 我正在使用布莱顿,一切正常。我有一小段代码为我执行ajax请求,我在标题中添加了这段代码,以绑定页面中当前元素的所有内容 from browser import document, ajax # URL Query String qs = '' # URL to work on url = '' def post_data(url, qs): req = ajax.ajax() # Bind the complete State to the
from browser import document, ajax
# URL Query String
qs = ''
# URL to work on
url = ''
def post_data(url, qs):
req = ajax.ajax()
# Bind the complete State to the on_post_complete function
req.bind('complete', on_post_complete)
# send a POST request to the url
req.open('POST', url, True)
req.set_header('content-type', 'application/x-www-form-urlencoded')
# send data as a dictionary
req.send(qs)
def get_data(url, qs):
req = ajax.ajax()
req.bind('complete', on_get_complete)
# Bind the complete State to the on_get_complete function
req.open('GET', url+'?'+qs, True)
req.set_header('content-type', 'application/x-www-form-urlencoded')
req.send()
def on_post_complete(req):
if req.status == 200 or req.status == 0:
# Take our response and inject it into the html div with id='main'
document["main_area"].html = req.text
else:
document["main_area"].html = "error " + req.text
def on_get_complete(req):
if req.status == 200 or req.status == 0:
# Take our response and inject it into the html div with id='main'
document["main_area"].html = req.text
else:
document["main_area"].html = "error " + req.text
def account_click(ev):
get_data("/account", qs)
def contact_link_click(ev):
get_data("/contact", qs)
def logo_link_click(ev):
get_data("/main_page", qs)
def products_link_click(ev):
get_data("/products_page", qs)
def register_link_click(ev):
get_data("/register", qs)
document['login_link'].bind('click', account_click)
document['contact_link'].bind('click', contact_link_click)
document['logo_link'].bind('click', logo_link_click)
document['register_link'].bind('click', register_link_click)
document['running_link'].bind('click', products_link_click)
document['fitness_link'].bind('click', products_link_click)
document['tennis_link'].bind('click', products_link_click)
document['football_link'].bind('click', products_link_click)
document['golf_link'].bind('click', products_link_click)
好的,现在我更大的问题是,register\u link
从一开始就不在页面中。更准确地说,register\u link
仅在单击login\u link
链接后才会加载到DOM中,此后,register链接不会执行任何操作,因为事件无法从一开始就绑定到它上
现在我知道,我可以通过在那个页面中再次导入来轻松绕过这个问题,但我希望避免重复导入,并且我不确定到底该怎么做
编辑:
或者在brython中有没有一种方法可以等待DOM完全加载?这并不是常识不能为您服务的-brython在这方面的作用与Javascript完全相同:您想要更改的任何DOM元素都需要在您尝试修改/绑定它之前存在 几十年来,Javascript中实现这一点的“常用”方法是将绑定放在函数中,然后在页面底部调用它,或者在加载所有其他内容后,在
body
标记onload
事件上调用它。现代的“Javascript代码”通过使用jQuery或其他框架及其ready()
方法解决了这个问题
你必须在那里做同样的事情——计时器可能会工作,但这是有风险的。当然,在触发一个或多个其他功能后刚刚存在的元素应该在相应的功能内处理:
def account_click(ev):
get_data("/account", qs)
document['register_link'].bind('click', register_link_click)
正如您所注意到的,编写
account\u单击如下:
def account_click(ev):
get_data("/account", qs)
document['register_link'].active = True
document['register_link'].bind('click', register_link_click)
不工作,因为程序在执行下两行之前不会等待get_data
完成
对于这种情况,一种解决方案是在“获取数据”上编写一个特定版本的get\u data
和on\u get\u complete
(我假设“注册链接”按钮在页面中,但最初被禁用):
另一个选项是保持通用函数get_data
和on_get_complete
,并添加可选参数回调:
我找到了一个使用brython计时器的方法,但我仍然想知道是否有更好的方法,我也这么做了,但它仍然会尝试绑定到一个ID,该ID在绑定时“可能”还没有加载,这仍然会迫使我再次导入文件,这是一个浪费。这是一个好主意,没有想到这个,它工作得很好,谢谢
def complete_register(req):
"""Called when the Ajax request after "login_link" is complete."""
if req.status == 200 or req.status == 0:
# Take our response and inject it into the html div with id='main'
document["main_area"].html = req.text
# enable "register link" button and add binding
document['register_link'].disabled = False
document['register_link'].bind('click', register_link_click)
else:
document["main_area"].html = "error " + req.text
def get_data_and_register(url, qs):
req = ajax.ajax()
req.bind('complete', complete_register)
req.open('GET', url+'?'+qs, True)
req.set_header('content-type', 'application/x-www-form-urlencoded')
req.send()
def account_click(ev):
get_data_and_register("/account", qs)
def get_data(url, qs, callback=None):
req = ajax.ajax()
req.bind('complete', lambda req:on_get_complete(req, callback))
# Bind the complete State to the on_get_complete function
req.open('GET', url+'?'+qs, True)
req.set_header('content-type', 'application/x-www-form-urlencoded')
req.send()
def on_get_complete(req, callback=None):
if req.status == 200 or req.status == 0:
# Take our response and inject it into the html div with id='main'
document["main_area"].html = req.text
if callback is not None:
callback(req)
else:
document["main_area"].html = "error " + req.text