[英]Two functions don't work together, but no errors
I have a couple of javascript functions which: 我有几个JavaScript函数:
Both work on the same page, but not under specific circumstances. 两者都在同一页面上工作,但在特定情况下不行。
Here's the fiddle of the code below: 这是下面的代码的小提琴 :
/*************** show/hide sections ***************/
$('.arrow').click(function(event) {
var sec_id = $(this).attr('id').split('.')[0]; // admin.link -> admin
if ($(this).closest('td').attr('class') == 'subtitle')
$('.s_'+sec_id).toggle(); // toggle hide/show for 1 item (section)
else
$(this).closest('tr').nextUntil('tr:not(.s_' + sec_id+')').toggle();
});
/*************** Add rows ***************/
$('.add_row').click(function(event) {
var sid = $(this).attr('sid'); // the id of the <tbody>
var tbody = document.getElementById(sid); // the <tbody> to add rows to
// === GENERATE NEW NAMES for inputs
// get the name of the first input in the last row
var rows = tbody.rows;
var rowinput = rows[rows.length-1].getElementsByTagName('INPUT');
// split name into array
var name_piece = rowinput[0].name.split('][');
// create name for next row; check if last row is a blank row
var reg = new RegExp('^[0-9]+$');
if (reg.test(name_piece[1])) // if integer
var iteration = parseInt(name_piece[1], 10) + 1; // convert to int with base 10
else
iteration = 1;
if (iteration < 10)
iteration = '0'+iteration; // add left padding to ensure sort order
var front = 'items['+sid.substring(2)+']['+iteration+']'; // front of input name (remove the 's_' from name)
// END GENERATE NEW NAMES for inputs
// === CREATE ROW
var row = document.createElement('tr'); // create a row
var td1 = document.createElement('td'); // create first cell
td1.setAttribute('colSpan', 2);
td1.innerHTML = '<input type="text" name="'+front+'[desc]" maxlength="100" />';
var td2 = document.createElement('td'); // create second cell
td2.innerHTML = '<input type="text" name="'+front+'[price]" maxlength="9" onChange="calc_ttl()" class="right small" />';
var td3 = document.createElement('td'); // create third cell
td3.setAttribute('colSpan', 3);
// END CREATE ROW
// output
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
tbody.appendChild(row);
});
In the fiddle, you'll see 3 links, all of which work as they should. 在小提琴中,您将看到3个链接,所有链接均应正常工作。 The only exception is if I add a row while the hidden rows are shown;
唯一的例外是,如果我在显示隐藏行的同时添加了一行; eg.:
例如。:
From then on, the "Subsection" link no longer works unless I reload the page. 从那时起,除非重新加载页面,否则“小节”链接将不再起作用。 The code checks out, and Firebug reports no errors, so I'm at a loss.
该代码签出,并且Firebug没有报告任何错误,所以我很茫然。 Any advice much appreciated.
任何建议,不胜感激。
The problem is not in the jQuery code you've posted here. 问题不在您在此处发布的jQuery代码中。 It is in the HTML.
它在HTML中。 In your fiddle you have:
在您的小提琴中,您有:
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" class="s_grp_2d_ttl_asset" style="display: none;">
Once the row is visible, as soon as the mouse moves over it, the s_grp_2d_ttl_asset
class is replaced by the highlight
class, which makes your click event stop at the first element. 一旦该行是可见的,只要在它的鼠标移动,
s_grp_2d_ttl_asset
类由取代highlight
类,这使得您的点击事件止步于第一要素。 If you used the addClass, removeClass, or toggleClass functions instead, you could make the change without completely removing the original class. 如果改用addClass,removeClass或toggleClass函数,则可以在不完全删除原始类的情况下进行更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.