When clicked insert text into ul li

Question 1

Question by user1847112

I’m new to javascript/jquery and could need some help. When I click on the test button a new ul containing an li is appended into the body with the value of the input field. When clicked on the li element it should be removed. If there is nothing inside the ul, it should be also removed.
How can I make the code to create unordered list once and then insert li‘s inside? Also, how should I proceed to remove a li when I click on them?

This is the code I have now:

<input type="text" value="" id="text" />
<input type="button" id="test" value="Test" />

$(document).ready(function(){
    $("#test").click(function(){
        var t = document.getElementById("text").value;
        var UL = document.createElement('ul')
        var LI = document.createElement('li')
        $(UL).attr('id','main-list').appendTo(body)
        $(LI).appendTo("#main-list").text(t)
    });
    $("ul#main-list li").click(function(){
        $(this).remove()
    });
});

Answer

Answer by Starx

Starx

Just a small change is enough:

$("body").on("ul#main-list li", 'click', function(){
    $(this).remove()
});

Question 2

Question by meWantToLearn

meWantToLearn

unbind click to div. I have two divs .i want to unbind the click event to the inside div

when the page is loaded, i want to unbind the click events to triangle.
my JQuery code:

 $(".wrapper").unbind();
 $(".triangles").unbind();

 $(".triangles" ).click(function(){   //it is still clickable

  alert("hello u clicked me");
 });

<div class="wrapper">
     <div class="triangles">
     </div>
     <div class="triangles">
     </div>
     <div class="triangles">
     </div>
</div>

Answer

Answer by Starx

Starx

Use .off() to unbind the event, when you need to.

Example:

$(".triangles").off("click");

Another example: Here It will be clickable at first and not from the second time

$(".triangles" ).click(function(){
    alert("hello u clicked me");
    $(this).off('click'); //after this, $(".triangles") will not longer be clickable
});

Try it 🙂

Let me explain, what you did wrong in your codes

 $(".wrapper").unbind(); //unbinded all the events
 $(".triangles").unbind();  //unbinded all the events

 $(".triangles" ).click(function(){  //binded another click event
     alert("hello u clicked me"); //So of course it will be clickable
 });

Question 3

Question by bob_cobb

bob_cobb

Basically I’m trying to make a button be able to handle editing of an element. I want it so that when I click on the Edit button, it changes the text to Save Changes and adds a class which will then bind the button to another click event so that when they click Save Changes, it’ll alert Saved and change the text back to Edit. It does this perfectly once. If you continue to try to do it, it simply won’t add the class or change the text anymore.

Here is a demo on jsfiddle

The code:

$(function() {
$button = $('button[name="edit"]');
$button.on('click', $button, function() {
    var $that = $(this);
    $that.text('Save Changes');
    $that.addClass('js-editing');
    if ($that.hasClass('js-editing')) {
        $that.off('click').on('click', $that, function() {
            alert('Saved!');
            $that.text('Edit');
            $that.removeClass('js-editing');
        });
    }
});

});

Answer

Answer by qw3n

qw3n

Try this http://jsfiddle.net/bpD8B/4/

$(function() {
    $button = $('button[name="edit"]');
    $button.on('click', $button, function() {
        var $that = $(this);
        if($that.text()=='Edit'){
          $that.text('Save Changes');
          $that.addClass('js-editing');
        }
        else{
                alert('Saved!');
                $that.text('Edit');
                $that.removeClass('js-editing');
        }
    });
});

Answer

Answer by Starx

Starx

This is just a logic problem. And with $that.off('click').on('click', $that, function() { you are delegating to itself, which is not how you should do it.

Here is a solution using your code:

$(function() {

    $button = $('button[name="edit"]');
    $button.on('click', $button, function() {
        var $that = $(this);
        if ($that.hasClass('js-editing')) {
            alert('Saved!');
            $that.text('Edit');
            $that.removeClass('js-editing');        
        } else {      
            $that.text('Save Changes'); 
            $that.addClass('js-editing');
        }
    });

});

Demo

Question 4

Question by nic

nic

i am new in programming.here i have given description of my problem
i have one pair of two text box. one text box is for url and other is for instruction but all text-boxes created dynamically depending on what value comes from database.

for example $testing_type_id=2 so i get total two pair of text boxes ,let it called bundle.$i is used for indentify textbox uniquely.

  <input type = "text"  size="33"   class="uploadtxt1 url" name="txturl_<?php echo $testing_type_id ; ?>" id = "txturl_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" />
             <input type = "text"  class="uploadtxt2" size="33" name="txtinstruction_<?php echo $testing_type_id ; ?>" id = "txtinstruction_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value=""  /> <br/>
             <input type="submit" name="checkout" id="checkout"   class="graybtn1 ptr  button_float_left_checkout" disabled="disabled" value="Proceed To Checkout" />

here what i wanted to do that if all bundle has value, either in one textbox or both textbox so and so enable submit button.if i removed value so disable submit button using jquery.

need a help urgent.Thanks in Advance.

Answer

Answer by Sheikh Heera

Sheikh Heera

I think this will work

$(document).ready(function(){
    $("input[class^='uploadtxt']").keyup(function(e){
        var alltxt=$("input[class^='uploadtxt']").length;
        var empty=true;
        $("input[class^='uploadtxt']").each(function(i){
            if($(this).val()=='')
            {
                empty=true;
                $('#checkout').prop('disabled', true);
                return false;
            }
            else
            {
                empty=false;
            }
        });
        if(!empty)  $('#checkout').prop('disabled', false);                    
    });
});

An example is here.

Answer

Answer by Starx

Starx

I am going to suggest a minor markup changes so that will be easy to handle the traversing.

Wrap the elements in a <div>

<div class="item">
    <input type = "text"  size="33"   class="uploadtxt1 url" name="txturl_<?php echo $testing_type_id ; ?>" id = "txturl_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" />
    <input type = "text"  class="uploadtxt2" size="33" name="txtinstruction_<?php echo $testing_type_id ; ?>" id = "txtinstruction_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value=""  /> <br/>
    <input type="submit" name="checkout" id="checkout"   class="graybtn1 ptr  button_float_left_checkout" disabled="disabled" value="Proceed To Checkout" />
</div>

Then, Attach a snippet on the change event

$("input[type=text]", $(".item")).change(function() {
    var allField = true;
    $(this).closest(".item").find("input[type=text]").each(function() {
         allField = allField && ($(this).val().length > 0)
    });
    if(allField) {
        $(this).closest(".item").find("input[type=submit]").prop('disabled', false);
    }
});

Demo of Working Solution

Question 5

Question by 9-bits

9-bits

With jquery .on() you can pass an optional parameter to set the event data. Can you do this with trigger as well?

Answer

Answer by Starx

Starx

I know an workaround we can use for this

$("button").on("click", function(event) {
   event.data = $(this).data('events'); // get the data value 
   alert(event.data); //use your data as you want
});


//Now set the data value and trigger
$("button").data('events','youreventsvalue').trigger("click");

Here is a demo

Tag: jquery-events

When clicked insert text into ul li

Question by user1847112

Answer by Starx

unbind click to div

Question by meWantToLearn

Answer by Starx

Adding two click events to the same button only works once

Question by bob_cobb

Answer by qw3n

Answer by Starx

how to button enable when all textbox has value in jquery?

Question by nic

Answer by Sheikh Heera

Answer by Starx

Demo of Working Solution

Can you set event.data with jquery trigger

Question by 9-bits

Answer by Starx

Please fill the form - I will response as fast as I can!