using jQuery with Custom Form Elements

Question

<fieldset>
  <legend id="Cities">Cities</legend>
  <div class="legend-underline"></div>
  <div class="filters" id="Cities-filters">
  <div>
   <span class="checkbox" style="background-position: 0pt -34px;"></span>
   <input type="checkbox" value="Adelaide" class="styled" name="sidecity" id="sidecity-control-name-0">
   <label for="sidecity-control-name-0">Adelaide (58)</label>
  </div>                    
</fieldset>

[Update]

var inputs = $('.filters-widget.bordered div[class!="filters"]');
 inputs.each(function (index, element) { 
$(element).click("click", function () {
 console.log(element); 
});
 });

When I click on div the method log() is called twice.

How to solve this problem ?

What is so custom about any of these elements, they look pretty standard to me. At what event are you trying to change a checkbox? — Gabe
– Gabe, Commented Feb 6, 2012 at 17:53
I've been using custom elements, instead of the standard checkbox there is span class = "checkbox" — BILL
– BILL, Commented Feb 7, 2012 at 11:30

RoccoC5 · Accepted Answer · 2012-02-06 17:54:20Z

1

Bind an event handler to the checkbox click event. You can determine whether the checkbox is checked or not by inspecting the checked attribute in your handler:

$('#sidecity-control-name-0').click(function() {
    console.log(this.checked);
});

http://jsfiddle.net/qgR42/

answered Feb 6, 2012 at 17:54

RoccoC5

4,21320 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BILL Over a year ago

var inputs = $('.filters-widget.bordered div'); inputs.each(function (index, element) {         $(element).click(function () {             console.log(element);         });     });

BILL Over a year ago

var inputs = $('.filters-widget.bordered div[class!="filters"]');     inputs.each(function (index, element) {         $(element).click("click", function () {             console.log(element);         });     });

When I click on div the method log() is called twice

SoWhat · Accepted Answer · 2012-02-06 17:56:38Z

1

You want to create custom elements from markup? Bad Idea. Try enclosing the element into your markup after setting it's css to display:none. Use the element's change event to determine how to show the show your markup element.

That's what jquery UI and Uniform do. Check them out

answered Feb 6, 2012 at 17:56

SoWhat

5,6222 gold badges30 silver badges64 bronze badges

Comments

Michael L Watson · Accepted Answer · 2012-02-07 09:20:22Z

1

try .on function after checkboxes are styled

edited Feb 7, 2012 at 9:20

answered Feb 6, 2012 at 17:59

Michael L Watson

98013 silver badges26 bronze badges

1 Comment

kapa Over a year ago

The live method is deprecated as of 1.7, and was not recommended even before that. Please stop suggesting it.

Collectives™ on Stack Overflow

using jQuery with Custom Form Elements

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related