2010-03-02 80 views
0

所以我试图完成的是一个简单的附加到某个元素。我在被执行后,此问题在运行,其追加到位置,但然后继续回到它驻留在UL。jQuery appendTo(来回切换)

<script type="text/javascript"> 
    function execute() { 
     $('#desCopy').appendTo('#description') 
     $('#imgPlace').appendTo('#IMGbox') 
    } 
</script> 

<div id="content" style="background:#000; width:989px;"> 
    <div style="float:left; left:18px; margin:0; width:337px; position:relative; padding:15px 0 0 0; color:#FFF;"> 
     <div id="description"> 
     </div> 
    </div> 

    <div 
     id="IMGbox" 
     style="float:left; position:relative; display:block; background:#F00; width:652px; height:258px; background:#0FF; overflow:hidden;"> 
    </div> 

    <div style="float:right; background:#CCC; height:25px; width:652px;"> 
     <ul> 
      <li><a href="" onclick="execute()">Slide 1</a> 
       <ul style=""> 
        <li><span id="desCopy">Test description, Test description</span></li> 
        <li><img src="images/test.jpg" id="imgPlace"></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

回答

1

更改事件处理程序设置是这样的:

<a href="" onclick="execute(); return false"> 

更重要的是,用jQuery设置它,使处理程序返回false:

// somewhere in your initialization code: 
$(function() { 
    $('#theAnchorTag').click(function() { 
    $('#desCopy').appendTo('#description'); 
    $('#imgPlace').appendTo('#IMGbox'); 
    return false; 
    }); 
}); 

你必须给你的<a>的“id”值(在我的例子中是“theAnchorTag”),或者你可以在设置“click”处理程序的选择器中以其他方式识别它。你最好使用jQuery绑定事件处理程序;那些“onfoo”属性非常恶心。

+0

+1删除了我的答案。感谢您指出错误。给Starboy一个完整的jQuery解决方案可能不是一个坏主意。 – user113716 2010-03-02 16:11:16

+0

感谢兄弟 - 我真的很难输入速度足以击败你的答案:-) – Pointy 2010-03-02 16:12:29

+0

感谢您的响应波蒂! – Starboy 2010-03-02 16:12:52

0

你不得不返回从执行假以防止事件冒泡。

+0

在这种情况下,问题不在于冒泡,而在于单击“a”元素的默认行为。 – user113716 2010-03-02 16:08:35

0

的问题是,一个空的HREF(如与您联系的情况下),点击时会重新加载页面..

所以你重新安排你的li元素,然后在页面重新加载得到恢复一切回到他们如何最初..

正如你需要通过返回从您的处理程序错误的取消默认点击动作其他的答案中提到..

你也应该看看与jQuery的分配处理程序,而不是内联属性..

+0

谢谢你在这里的解释加比,真的帮助我。 – Starboy 2010-03-02 16:15:51