Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts

    JQuery - using jquery on code that was generated with Javascript

    So I have a site that is using the Groupon clone code (the site is dailycarolinadeals *dot* com).

    On the main page, there is "buy" box (in blue, at the top left of the content). At the bottom of this box, there are two lines of text, one says "Buy for a friend" and the other says "donate this deal." Looking at firebug, this box area is coded like so:

    Code:
    <div class="content buyAsGift ">
    <a class="main" href="/deal/purchase/id/55/ag/55">Buy it for a friend!</a>
    <div id="buyInfo">
    Donate This Deal
    <div id="donateInfo">
    <p>If you would like to purchase a deal to be donated to local military troops, click the "Buy it for a friend" link and enter troops@dailycarolinadeals.com in the recipient email field. If you would like to have it donated to a family with a special-needs child, enter donate@dailycarolinadeals.com in the recipient email field. Donations for the troops will be submitted to the local USO and Marine Corps Community Services. Donations for special-needs families will be given to the Marine Corps Exceptional Family Member Program and the Family Support Network of the Crystal Coast. Thank you for your willingness to support our military community and help families with exceptional medical concerns.</p>
    </div>
    </div>
    </div>
    Right now, the div "donateInfo" is styled with display:none. What I'd like to have happen is when a user mouses over the "buyInfo" div, I want the "donateInfo" div to appear, and on mouse out, it disappears. Seems easy enough, and I know how to do it: jquery. This is the jquery that I have:

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    	$('#buyInfo').hover(
    		function() {
    			$('#donateInfo').css('display','block');
    		},
    		function() {
    			$('#donateInfo').css('display','none');	
    	});
    });
    
    </script>
    This worked when I tested in w3Schools tryit editor. However, when I put it on my site, it didn't work. That's when I did a view source of the code, and I noticed that the blue box was being added dynamically with this:

    Code:
    jQuery("#wlt-DealTimeLeft").parent().prev().append('<div class=\'blueBox\'><div class=\'content buyAsGift \'><a class=\"main\" href=\"/deal/purchase/id/55/ag/55\">Buy it for a friend!<\/a><div id=\'buyInfo\'>Donate This Deal\n\t<div id=\'donateInfo\'><p>If you would like to purchase a deal to be donated to local military troops, click the \"Buy it for a friend\" link and enter troops@dailycarolinadeals.com in the recipient email field.  If you would like to have it donated to a family with a special-needs child, enter donate@dailycarolinadeals.com in the recipient email field.  Donations for the troops will be submitted to the local USO and Marine Corps Community Services.  Donations for special-needs families will be given to the Marine Corps Exceptional Family Member Program and the Family Support Network of the Crystal Coast. Thank you for your willingness to support our military community and help families with exceptional medical  concerns.<\/p>\n<\/div>\n<\/div><\/div>');
    This piece of code comes AFTER my jquery code. So I'm assuming that this is the reason that the jquery isn't working correctly. I am unable to move my code to come AFTER this code, so my question is:

    1) Is there a way to interact with jquery created elements?
    2) Is there another way to do a "popup" onscreen than by using jquery?
    Last edited by resdog; 12-05-2011 at 08:27 PM.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Of course, as soon as I post this, I solved it. I needed to add the jquery to the module that was dynamically outputting the div code.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •