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
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts

    Jquery click function only able to click once

    Okay, so I am trying to get this jquery click function to change my data action to which ever option that it isn't. Meaning if it is open, then it needs to change to close. If it is close, then it needs to change to open. I have managed to do that except it will only do it once. Any ideas why??
    html:
    Code:
    <div class="btn big span3 mod" data-id="1">
                    	<a href="/TrainingModules/index/1">
                        	<div class="modTitleBox">
                        		<span>Module</span>
                        	</div>
                        </a>
                        <div class="modTools" data-id="1">
                        
                        	<div class="modVis" data-action="close">
                            	<i class="icon-eye-open"></i>
                            </div>
                            <a href="/admin/TrainingModules/edit/1" class="modEdit" title="Edit">
                            	<i class="icon-wrench"></i>
                         	</a>
                    	</div>
                   	</div>
    javascript
    Code:
    $(document).ready(function(){
      // ajax setup
      /*$.ajaxSetup({
        url: 'ajaxvote.php',
        type: 'POST',
        cache: 'false'
      });*/
    
      // any voting button (up/down) clicked event
      $('.modVis').click(function(){
    	var self = $(this); // cache $this
    	//var child = self.child();
        var action = self.data('action'); // grab action data up/down
        var parent = self.parent().parent(); // grab grand parent .item
        var postid = parent.data('id'); // grab post id from data-postid
          // vote up action
          if (action == 'open') {
            // increase vote score and color to orange
            // parent.find('.vote-score').html(++score).css({'color':'orange'});
    		$(self).attr('data-action','close');
    		//$( "div.demo-container" ).html('<p>'+self.attr('data-action')+'</p>');
    		$(child).attr('class','icon-eye-close');
            // change vote up button color to orange
            //self.css({'color':'orange'});
            // send ajax request with post id & action
            //$.ajax({data: {'id' : postid, 'hidden' : 0}});
          }
          // voting down action
          else if (action == 'close'){
            $(self).attr('data-action','open');
    		self.child().attr('class') = 'icon-eye-open';
            // send ajax request
            //$.ajax({data: {'id' : postid, 'hidden' : 1}});
          };
      });
    });
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,683
    Thanks
    25
    Thanked 656 Times in 655 Posts
    If you do this in your function
    Code:
    var self = $(this);alert(self);
    You get
    Code:
    object Object
    , effectively you don't have a variable named self. You also don't have action or parent.

    And if this does work doesn't changing ('class', 'icon-eye-close') just put the kiss of death to your click function? Making it work only once.
    Evolution - The non-random survival of random variants.

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


  •  

    Posting Permissions

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