Error when trying to create Jquery button_问答_开发者

Error when trying to create Jquery button

开发者 https://www.devze.com 2023-02-01 23:52 出处：网络

I\'m not really sure what i\'m doing wrong because I have done this will success before. I have some html code being added dynamically

I'm not really sure what i'm doing wrong because I have done this will success before.

I have some html code being added dynamically

...<td><label><input type=\"checkbox\" checked=\"checked\" class=\"Activechk form-contractor-active\" />Active</label></td>"...

Then I execute this JQuery: $(".Activechk").button();

I am getting an ~~"Out of Memory" Error~~ "Stack Over Flow" Error

Does this ring any bells? Becuase i'm stumped...

Update: according to fire bug error is at line 1599 of Jquery 1.4.2

Surrounding code:

1594 if ( !eventHandle ) {
1595 elemData.handle = eventHandle = function() {
1596 // Handle the second event of a trigger and when
1597 // an event is called after a page has unloaded
1598 return typeof jQuer开发者_开发百科y !== "undefined" && !jQuery.event.triggered ?
1599 jQuery.event.handle.apply( eventHandle.elem, arguments ) :
1600 undefined;
1601 };
1602 }

I looked at it a little more closely and am editing this answer.

It appears that the button function needs a label with a special attribute called "for" with a value that is the same as the id of the input element which will become the button.

In the below example, I observed that the label/input relationship in your sample output was different from this Label.

The below example is based on the documentation found at: http://docs.jquery.com/UI/Button

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $(".Activechk").button();
  });
  </script>
</head>
<div id="problem">
<label><input type="checkbox" checked="checked" class="Activechk form-contractor-active" />Active One</label>
<br />
<label><input type="checkbox" checked="checked" class="Activechk form-contractor-active" />Active Two</label>
<br />
<label><input type="checkbox" checked="checked" class="Activechk form-contractor-active" />Active Three</label>
</div>
<hr />
<div id="solution">
<p>Inputs can be somewhere else on the DOM but cannot be child elements of labels. The buttons appear where the labels are:</p>
<!-- input elements -->
<input id="inputSolutionOne" type="checkbox" checked="checked" class="Activechk form-contractor-active" />
<input id="inputSolutionTwo" type="checkbox" checked="checked" class="Activechk form-contractor-active" />
<input id="inputSolutionThree" type="checkbox" checked="checked" class="Activechk form-contractor-active" />

<!-- label elements -->
<table>
    <tr><td>
<label for="inputSolutionOne">Active One</label>
    </td></tr><tr><td>
<label for="inputSolutionTwo">Active Two</label>
    </td></tr><tr><td>
<label for="inputSolutionThree">Active Three</label>
    </td></tr>
</table>
</div>
</body>
</html>