jQuery appendTo (switching back and forth)

So what I'm trying to accomplish is a simple appendTo a certain element. The issue I'm having is after execute is run, it appends to the location but then proceed to go back to the ul it resides in.

<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>

-------------Problems Reply------------

Change the event handler setup like this:

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

Better yet, set it up with jQuery and have the handler return false:

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

You'd have to give your <a> an "id" value ("theAnchorTag" in my example), or you could identify it some other way in the selector where the "click" handler is set up. You're really better off using jQuery to bind event handlers; those "onfoo" attributes are pretty icky.

The problem is that an empty href (as is the case with your link) will reload the page when clicked..

So you rearrange your li elements and then the page gets reloaded reverting everything back to how they originally were..

As mentioned in the other answers you need to cancel the default click action by returning false from your handler..

You should also look to assigning the handler with jquery instead of inline attributes..

You have to return false from execute to prevent event bubbling.

Category:jquery Views:0 Time:2010-03-02
Tags: jquery

Related post

  • jQuery appendTo(), json not working in IE 6,7,8 2009-09-30

    I've been racking my head for two days trying to find a solution for this. I'm using jQuery.ajax() to grab values from the database to update a box when another box is changed. The php script grabs the values from the database and then spits out json

  • jquery: .toggle(switch) with effect? 2009-11-13

    i like the jquery.toggle(switch) function as i can do the following in one line; $('.mytable').toggle(checkboxes[0].checked); However i cant seem to integrate effects into this call (sliding / fading etc). Can anyone offer suggestions? --------------

  • Good jQuery Content Switcher 2010-04-25

    Does anyone know of a good jQuery content switcher? I want to switch a log in and register form. --------------Solutions------------- You could try one like this http://code.google.com/p/jquery-content-panel-switcher/ You can do something like this w

  • jQuery appendTo HTML not selectable when added to a Google Map 2010-08-11

    Hey all, im having an issue with Google maps and jQuery appendTo(). Im using the following to create and attach a custom infoWindow to Google markers. $("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE)); The following would also work ... $("

  • The "illegal character" in jquery appendTo() 2011-05-04

    here is my jquery appendTo() code: $('<li><a href="javascript:void (0)" onmousedown="document.getElementById('searchType_banner').value='p';">document</a></li>').appendTo('.wapper'); in firebug it remind me an error that "miss

  • Firefox Jquery appendTo inefficiency? 2011-07-23

    I'm working on a portfolio redesign and I have a bit of JS that generates a large number (around 300) of divs, styles them, and appends them to body. This works quickly and perfectly in webkit browsers, but when it comes to Firefox it's slow as hell.

  • JQuery appendTo method overides existing node in XML document 2011-12-27

    From an ajax call I get a response that look like something like this <root> <node> <innerNode>value</innerNode> </node> when I get the response I keep the <node> node in a variable,I modify it and I try to insert

  • Codeigniter and jQuery css switcher 2010-01-24

    I have been following a tutorial on creating a style switcher with PHP and jQuery, now in the tutorial the PHP function uses get data, which is not available in codeigniter, I was hoping someone would be able to help me tidy up my sorry attempt? My P

  • Selecting an Element after a jQuery appendTo Function 2009-06-18

    I need to dynamically append a set of elements to a div via jQuery and then turn around and reference them. It's really odd that you can't do this, since if you view the DOM in firebug, the elements are there. jQuery just doesn't act like they exist.

  • jQuery content switch and fadein plugin? 2009-08-15

    For a project I would like to make a content banner that would switch between several "slides" (containing html, images etc). The "slides" are div elements. The slideIn effect used by jCarousel isn't what the guy wants, he wanst it to fadeIn/fadeOut

  • jquery appendTo() not working in IE 7,8 2009-11-06

    I am using jquery to do paginations. My code is wroking fine in FF but in IE it says the error on linee 255 in jquery.js and its is on the append function what should i do var $pager = $j('<br><span class="pager"></span>'); $j('<

  • jquery AppendTo & Append Error in Firefox 2009-11-07

    I am getting a strange error using jQuery 1.3.2 and Firefox. I have created a small popup window for an element and I am using the code var popupWindow = $($('#template')[0].innerHTML).css( 'top', top).css( 'left', left).css( 'position', 'absolute').

  • Items not added to ListBox after using jQuery .appendTo 2009-11-19

    Preface: First time really using JavaScript + jQuery, so my problem likely stems from a lack of understanding. I have some very simple Javascript to move elements from one ListBox to another: $('[id$=AddRole]').click(function () { $('[id$=MissingRole

  • jquery appendTo removes javascript script tags 2009-12-08

    var testdiv = '<div id="hello"><p>hiii</p> <script type="text/javascript">some javascript functions</script> </div>'; $(testdiv).appendTo(document.body); After running above code, div that is added is missing javas

  • jquery appendTo form 2010-04-14

    jquery $(function(){ $('#4').click(function() { $('<input name="if4" type="text" value="other price>"').appendTo('form'); }); }); html <form> < input name="name" type="text" value="Enter your name" /><br /> < input name="co

  • jquery tab switching links so they jump to top of page? 2010-06-02

    I was given some great help by redsquare to get this far to change jquery tabs from links within the content, but I have one more issue that I'm looking for support on... When a user clicks a link to switch to a different tab from within the content,

  • jQuery Toggle switch images 2010-06-07

    I have a situation where I am not understanding jQuery's Toggle. I have two buttons, both of them open the same content and when you click on either button the content should open or close and the attribute changes the button from open to closed. (So

  • jQuery appendTo doesn't work in IE7 2010-07-21

    I have the following code working fine in IE8 (and IE8 in IE7 compatibility mode) but not generating the right results in IE7 var areaId = "eventArea" + index; var tempArea = $("<AREA id='" + areaId + "' shape='rect' coords='" + value.x + "," + va

  • jquery appendTo() issue 2010-08-18

    I'm trying to use jQuery's appendTo function to add data to some html that I load from another file. Why won't this work: $('#pop-up').load('html_elements/news.html #newsItem', function() { $(newsItems[$(event.target).attr('href')].title).appendTo($(

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.091 (s). 11 q(s)