Develop Reference

Click event on AJAX generated content

I have a link in my HTML that I want to trigger using a click event in jQuery. This content is generated with AJAX. I know that I'm supposed to use .on, so that's what I'm doing. My code does fire on the td when I use this code:
$(".onestepcheckout-summary").on("click", ".wider", function() {
alert('success');
return false;
});
But it's supposed to fire on the anchor tag with the class addsqty. I've tried multiple things like changing the .wider to .wider > a and .wider > .addsqty or simple .addsqty. Why doesn't this work?
Here is my HTML. The AJAX loaded content starts with <table class="onestepcheckout-summary">.
<div class="onestepcheckout-summary">
<table class="onestepcheckout-summary">
<thead>
<tr>
<th class="name" colspan="2">Artikel</th>
<th class="qty">Stück</th>
<th></th>
<th class="total">Zwischensumme</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">
Simpel product </td>
<td class="editcart">
-
</td>
<td class="qty" nowrap="">
<input type="hidden" value="5" id="qty_46" name="cart[46][qty]" class="qtyinput" size="1">
5 </td>
<td class="editcart wider" nowrap="">
+
</td>
<td class="total">
<span class="price">€ 10,00</span> </td>
</tr>
</tbody></table>
<table class="onestepcheckout-totals">
<tbody><tr>
<td style="" class="a-right" colspan="1">
Zwischensumme </td>
<td style="" class="a-right">
<span class="price">€ 145,00</span> </td>
</tr>
<tr>
<td style="" class="a-right" colspan="1">
<strong>Gesamtbetrag</strong>
</td>
<td style="" class="a-right">
<strong id="total-price"><span class="price">€ 145,00</span></strong>
</td>
</tr>
</tbody></table>
</div>

dynamic content never got the click event :
for this you need to use on , bind and delegate:
i always prefer Delegate. Try This :
$("body").delegate(".wider", "click", function() {
alert('success');
return false;
});

You could try in such a way also
$(document).on("click", '.onestepcheckout-summary',function (event) {
// whatever u want ...
});
Change parent div classname also , it seems like both have same class name.
<div class="div-class">
<table class="table-class">
......
</table>
</div>
$('.div-class').on("click", '.onestepcheckout-summary',function (event) {
// whatever u want ...
});

Why Knockout ignore HTML Code Binding?

I`m using KnockoutJS to bind to a table in WINJS App , when I run My App at the first time , it runs well with correct binding .
this is the Row.innetHTML =
<tbody id="repeater" data-bind="foreach: labsTableArrayKo"
<tr class="tr">
<td><span data-bind="text: VlabName"></span></td>
<td><span data-bind="text: VMType"></span></td>
<td>
<div data-bind="if: VMType == 'Virtual Machine'">
<span data-bind="text: vmStatus"></span>
</div>
<div data-bind="if: VMType == 'RemoteApp'">
<span data-bind="text: 'Ready'"></span>
</div>
</td>
</tr>
but when I change Array which use in binding , Some of HTML Code is Deleted ( I dont know How ?! ) .
the Row.InnetHTML is =
<tr class="tr">
<td><span data-bind="text:VlabName"></span></td>
<td><span data-bind="text: VMType"></span></td>
<td>
<div data-bind="if: VMType == 'Virtual Machine'"></div>
<div data-bind="if: VMType == 'RemoteApp'"></div>
</td>
</tr>
here is how I bind To HTML Code by Javascript :
var viewModel = {labsTableArrayKo: labs_Table_Array};
ko.cleanNode(document.getElementById("repeater"));
var q = document.getElementById("repeater").innerHTML;
ko.applyBindings(viewModel, document.getElementById("repeater"));
So what is the problem ??

actually I replaced (If) with (visible) and it works with me , I don't know exactly why but it works .

ng-click in parent div also in child div

I've the following code:
<table class="table">
<tr>
<th>Name___</th>
</tr>
<tr ng-repeat="app in apps"
ng-click="go('/editApp/' + plugin.name);">
<td>
<span>{{app.name}}</span>
</td>
<td style="width: 100px;">
<i class="glyphicon glyphicon-pencil"
ng-click="openPopup(app)"></i>
</td>
</tr>
</table>
When I click on the OpenPopup, also the go() method firing, how can I do that, If I click on popup just the popup will fire?

This executing because your <td> nested in <tr>, and click firstly fired openPopup()
then fired go(). You can use $event.stopPropagation() for stop event propagation to <tr>.
Try
<table class="table">
<tr>
<th>Name___</th>
</tr>
<tr ng-repeat="app in apps"
ng-click="go('/editApp/' + plugin.name);">
<td>
<span>{{app.name}}</span>
</td>
<td style="width: 100px;">
<i class="glyphicon glyphicon-pencil"
ng-click="openPopup(app);$event.stopPropagation()"></i>
</td>
</tr>
</table>

loop through multiple tables' row to grab certain values using jQuery

I need to grab the value inside <span> of each <tobdy>. I know the html is not well-formed, because I didn't write it. That's how SharePoint renders it, and it is in fact bad html. But the question is how do i interate through each and grab the numeric values inside of brackets i.e 122, 87, and 13 using jQuery? Is this doable?
Here is a quick fiddle: http://jsfiddle.net/traFg/
<TBODY id=titl386-1_ groupString="%3B%23Completed%3B%23">
<TR id=group0>
<TD class=ms-gb colSpan=100 noWrap>
<A onclick="javascript:ExpCollGroup('386-1_', 'img_386-1_',event, false);return false;" href="javascript:">
<IMG id=img_386-1_ border=0 alt=expand src="/_layouts/images/plus.gif"> Status</A> : Completed
<SPAN> ‎(122) </SPAN>
</TD>
</TR>
</TBODY>
<TBODY id=titl386-1_ groupString="%3B%23InProgress%3B%23">
<TR id=group0>
<TD class=ms-gb colSpan=100 noWrap>
<A onclick="javascript:ExpCollGroup('386-1_', 'img_386-1_',event, false);return false;" href="javascript:">
<IMG id=img_386-1_ border=0 alt=expand src="/_layouts/images/plus.gif"> Status</A> : Completed
<SPAN> ‎(87) </SPAN>
</TD>
</TR>
</TBODY>
<TBODY id=titl386-1_ groupString="%3B%23NotStarted%3B%23">
<TR id=group0>
<TD class=ms-gb colSpan=100 noWrap>
<A onclick="javascript:ExpCollGroup('386-1_', 'img_386-1_',event, false);return false;" href="javascript:">
<IMG id=img_386-1_ border=0 alt=expand src="/_layouts/images/plus.gif"> Status</A> : Completed
<SPAN> ‎(13) </SPAN>
</TD>
</TR>
</TBODY>

like this
jQuery('tbody span').each(function()
{
alert(jQuery(this).text().match(/\d+/));
})

Nested containerless foreach in tbody failing for IE

I'm having a bit of trouble getting some nested, containerless foreach bindings to work. It works in grownup browsers, but not IE (8 OR 9).
The closest I could find was this question, but the root of that problem seems to be a lack of a tbody tag, which I have. The error IE is giving is
Cannot find closing comment tag to match: ko foreach: seniors
Sorry for the wall of text, but below is my markup.
<tbody data-bind="foreach: superGroups">
<tr>
<td style="font-weight: bold;" data-bind="text: superName() || 'No Super Set'" colspan="8">
</tr>
<!-- ko foreach: seniors -->
<tr>
<td></td>
<td style="font-weight: bold;" data-bind="text: seniorName() || 'No Senior Set'" colspan="7"></td>
</tr>
<!-- ko foreach: items -->
<tr>
<td>
<span data-bindX="text:superName"></span>
</td>
<td>
<span data-bindX="text:seniorName"></span>
</td>
<td>
<span data-bind="text:clientName"></span>
<i class="icon-tags" data-bind="attr:{title: labels}, visible: labels"></i>
</td>
<td>
<span data-bind="text:description"></span>
</td>
<td>
<span data-bind="visible:superPayAmount">$<span data-bind="text:superPayAmount"></span></span>
<span data-bind="visible:superPayAmount.length == 0">-</span>
</td>
<td>
<span data-bind="shortDate: superStartDate"></span> - <span data-bind="shortDate: superEndDate"></span>
</td>
<td>
<span data-bind="visible:seniorPayAmount">$<span data-bind="text:seniorPayAmount"></span></span>
<span data-bind="visible:!seniorPayAmount.length == 0">-</span>
</td>
<td>
<span data-bind="shortDate: seniorStartDate"></span> - <span data-bind="shortDate: seniorEndDate"></span>
</td>
</tr>
<!-- /ko -->
<!-- /ko -->
</tbody>

You missed closing td tag in the first tr:
<tr>
<td style="font-weight: bold;" data-bind="text: superName() || 'No Super Set'" colspan="8"></td>
</tr>