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 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2013
    Location
    Finland/Estonia
    Posts
    53
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Post JQuery will only detect first click on a button

    Hi

    I have a button that is created with javascript. I create it like this:

    Code:
    function createBtn() {
     var btn = document.createElement("button");
     btn.innerHTML = '<img src="https://googledrive.com/host/0B2OyVBoLl0gDTzBpSkhVWXd0WDg"></img>';
     btn.id = "showBtn";
     var roomDiv = document.getElementById("room");
     roomDiv.appendChild(btn);   
    }
    createBtn();
    Then I have some JQuery to detect whether it's clicked and run a function if it is.
    Code:
    $( "#showBtn" ).click(function() {
        alert("clicked");
      $( "#userDiv" ).animate({
        left: "+=286px"
      }, 1000, function() {
        hideBtn();
      });
    });
    The thing is, it's only counting the first time I click the button. I'm not sure what's going wrong.

    Any suggestions?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,306
    Thanks
    23
    Thanked 612 Times in 611 Posts
    The thing is, it's only counting the first time .....
    Where is this 'counting ' done?
    Don't you think we need some HTML
    Where is the hideBtn() function.
    Here's something that shows the div does move and the alert shows up every time the button is clicked.
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    </head>
    
    <body>
    <div id="userDiv" style="height:100px;width:100px;background-color:blue;position:relative;"></div>
    <div id="room"></div>
    
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    function createBtn() {
    	var btn = document.createElement("button");
    	btn.innerHTML = 'Move the div';
    	btn.id = "showBtn";
    	var roomDiv = document.getElementById("room");
    	roomDiv.appendChild(btn);
    }
    createBtn();
    
    $( "#showBtn" ).click(function() {
    	alert("clicked");
    	$( "#userDiv" ).animate({
    		left: "+=286px"
    		}, 1000, function() {
    		hideBtn();
    	});
    });
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Jul 2013
    Location
    Finland/Estonia
    Posts
    53
    Thanks
    9
    Thanked 0 Times in 0 Posts
    There is no counting done. It's just that the function isn't ran after the first click.

    I don't have any HTML as such to present you since I'm programming an extension/plugin for a website.
    This is the barebones version of the parts I'm working with

    Code:
    <div id = "room">
      <div id = "userDiv">
        <div class = "estTop">
           <span class = "estTopTitle>USERS ONLINE</span>
        </div>
        <div class="spanHolder">
           <strong class="adminPad {user id}">{username}</strong>
        </div>
        <div class="spanHolder">
           <strong class="adminPad {user id}">{username}</strong>
        </div>
        .....
      </div>
    </div>
    hideBtn() is just another button I use for hiding that div I'm showing with the createBtn() function

    Code:
    function hideBtn(){
        var hideBtn = document.createElement("button");
        hideBtn.id = "hideBtn";
        hideBtn.innerHTML = '<img src="https://googledrive.com/host/0B2OyVBoLl0gDTzBpSkhVWXd0WDg"></img>';
        var usersOn = document.getElementsByClassName("estTopTitle")[0];
        usersOn.appendChild(hideBtn);
        
        document.getElementById('hideBtn').onclick = function() 
        {
            $( "#userDiv" ).animate({
            left: "+=-286px"
          }, 1000, function() {
          });
        }
    }

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,306
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Please note that I added styling to the userDiv. And changed the
    Code:
    btn.innerHTML = 'Move the div'; and hideBtn.innerHTML = 'Poke';
    Because
    Code:
    btn.innerHTML = '<img src="https://googledrive.com/host/0B2OyVBoLl0gDTzBpSkhVWXd0WDg">>';
    kills your JS. If I had some time to work on your button I could get it, but don't have that time right now.
    You need to limit the movement of the userDiv. Right now you can send it off the page in either direction.
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    </head>
    
    <body>
    <div id = "room">
      <div id = "userDiv" style="width:200px;position:relative;">
        <div class = "estTop">
           <span class = "estTopTitle">USERS ONLINE</span>
        </div>
        <div class="spanHolder">
           <strong class="adminPad {user id}">{username}</strong>
        </div>
        <div class="spanHolder">
           <strong class="adminPad {user id}">{username}</strong>
        </div>
      </div>
    </div>
    
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    function createBtn() {
    	var btn = document.createElement("button");
    	btn.innerHTML = 'Move the div';
    	btn.id = "showBtn";
    	var roomDiv = document.getElementById("room");
    	roomDiv.appendChild(btn);
    }
    createBtn();
    
    $( "#showBtn" ).click(function() {
    	//alert("clicked");
    	$( "#userDiv" ).animate({
    		left: "+=286px"
    		}, 1000, function() {
    		hideBtn();
    	});
    });
    
    function hideBtn(){
        var hideBtn = document.createElement("button");
        hideBtn.id = "hideBtn";
        hideBtn.innerHTML = 'Poke';
        var usersOn = document.getElementsByClassName("estTopTitle")[0];
        usersOn.appendChild(hideBtn);
    
        document.getElementById('hideBtn').onclick = function() {
            $( "#userDiv" ).animate({
            left: "+=-286px"
          }, 1000, function() {
          });
        }
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

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