jQuery position of element after html() call

I am using this plugin for fly-out menus: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/ The button is inside a div like that:
some stuff menu
I am applying it to some link like so: jQuery('.quickfire').menu({ content: jQuery('#search-engines').html(), // grab content from this page showSpeed: 400 }); Where .quickfire is the class name of the link. So far so good, works. However the user can also trigger an AJAX call, which will fetch a bunch of HTML from the server and replace the div "stuff" with new content (which itself will contain a quickfire link). jQuery.ajax({ url: 'ajax_file.php', data: { action: 'create_option_new_version', id: jQuery('#qid').val(), div: jQuery("#addMoreOptions").parent().parent().attr('id'), cleanOutput: true }, success: function(data, textStatus, jqXHR){ jQuery(".stuff").html(data); } }); As expected, the quickfire link is no longer attached to the jQuery Menu. So, i'm linking it again every time: jQuery.ajax({ url: 'ajax_file.php', data: { action: 'create_option_new_version', id: jQuery('#qid').val(), div: jQuery("#addMoreOptions").parent().parent().attr('id'), cleanOutput: true }, success: function(data, textStatus, jqXHR){ jQuery(".stuff").html(data); var position = jQuery('.quickfire').position(); console.log("left: " + position.left + " top: " + position.top); jQuery('.quickfire').menu({ content: jQuery('#search-engines').html(), // grab content from this page showSpeed: 400 }); } }); Almost there! The issue is that, when I click on the newly created quickfire button, it works, but the menu appears at the top left corner of my screen, instead of next to the button! I tried to print out the "position" of the quickfire button. For the initial load one, it said 361 x 527. For the subsequent ones, they all say 0 x 320 Here is the real code: jQuery("#addMoreOptions").live('click',function(){ jQuery(".lastPollOptionInput").removeClass("lastPollOptionInput"); jQuery.ajax({ url: 'ajax_file.php', data: { action: 'create_option_new_version', id: jQuery('#qid').val(), div: jQuery("#addMoreOptions").parent().parent().attr('id'), cleanOutput: true }, success: function(data, textStatus, jqXHR){ jQuery("#addMoreOptions").parent().parent().html(data); jQuery('.quickfire').fgmenu({ content: jQuery('#search-engines').html(), // grab content from this page showSpeed: 400 }); } }); });
I tried to "detach" the quickfire button right before replacing the content, then re-insert it. Now it doesn't put the menu on the top left, instead it puts the menu exactly where it was before I did the ajax call (which I guess makes sense). Not exactly the correct location, but at least a lot closer geographically

以上就是jQuery position of element after html() call的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏