wroh woefh wroh woefh - 2 months ago 7
HTML Question

when i trigger this jquery event, other element in other row of table got triggered as well which i want to prevent

when i trigger this jquery event, other element in other row of table got triggered as well which i want to prevent

$(document).ready(function(){
$(".Trigger_modi").delegate("a", "click",function(e){

e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');


$('.inner_element_1').html('<input type="text" name="subject" value="">');



$('.inner_element_2').html('<h2 > yahoo</h2>');
$('.inner_element_3').html('<h2>yahoo</h2>');

$('.inner_element_4').html('<h2>yahoo</h2>');
$('.inner_element_5').html('<h2>yahoo</h2>');

var t = document.getElementById('modi_i').value
window.alert("t: "+t);

event.stopImmediatePropagation();

});
});


This is jquery function that would be triggered if i click "a" tag.

and this would make table look like this ↓↓↓↓↓↓↓↓

This is description of what is happening

<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>">수정</a></div></div>


and this html code is wrapped by for loop which i suspect that it might be reason why i am getting trouble with

anyone suggest i could try?

<a class="Trigger" id="<%=idx %>"> <%=subject %></a>
<div class="Slider slideup">
<div id="Actual"><!-- 누르면 본문내용 보게됨. -->
</form>

<jsp:useBean id="bdao" class="Bob.Community.CommunityDAO" scope="session"></jsp:useBean>
<jsp:useBean id="bdto" class="Bob.Community.CommunityDTO"></jsp:useBean>


<div class="inner_element_1"><%=content %></div>



<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>">Modify</a></div></div>
<div class="">
<div id="Actual_modi">



</div>
</div>



<div class="inner_element_3"><a href="noticeDelete.jsp?i=<%=i %>">Delete</a></div>

<div class="inner_element_4"></div>
<div class="inner_element_5"></div>


</div>
</div>

Answer
$('.inner_element_1').html('<input type="text" name="subject" value="">');


$('.inner_element_2').html('<h2 > yahoo</h2>');
$('.inner_element_3').html('<h2>yahoo</h2>');

$('.inner_element_4').html('<h2>yahoo</h2>');
$('.inner_element_5').html('<h2>yahoo</h2>');

var t = document.getElementById('modi_i').value

In the above code you are assigning html to all .inner_element_1, .inner_element_2, .inner_element_3, .inner_element_4 and .inner_element_5 which jQuery will look all element with class inner_element_[1-5] of the whole page. So it may not raised another row event, it may just simply a HTML binding logic error in this case.

Try to revise your function as follow:

$(".Trigger_modi").each(function () {
    var $Trigger_modi = $(this);
    $Trigger_modi.delegate("a", "click",function(e){

        e.stopPropagation();
        var tnp = $(this).attr('id');
        window.alert("tnp: "+tnp);
        document.getElementById('modi_i').value=tnp;
        $('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+'  onclick="modiTest.jsp">');  


        $Trigger_modi.find('.inner_element_1').html('<input type="text" name="subject" value="">');

        $Trigger_modi.find('.inner_element_2').html('<h2 > yahoo</h2>');
        $Trigger_modi.find('.inner_element_3').html('<h2>yahoo</h2>');

        $Trigger_modi.find('.inner_element_4').html('<h2>yahoo</h2>');
        $Trigger_modi.find('.inner_element_5').html('<h2>yahoo</h2>');

        var t = document.getElementById('modi_i').value
        window.alert("t: "+t);

        event.stopImmediatePropagation();    
});

Edit 1 -

Please wrap the above code inside a $(document).ready() and also revise the first 3 lines as follow:

$(".Trigger_modi").each(function () {
        var $Trigger_modi = $(this);
        $Trigger_modi.find("a").on("click", function(e){
    ....

Edit 2 -

After looked into your noticeList.jsp, I think you have to revise all your elements that contain the id attribute inside the for loop since it is not allowed to contains 2(or more) elements share the same id in HTML.

Also, since you are looping via for(int i= (n-1) ;i<=(n-1)+x;i++), it is not allowed in HTML that using digit only in the id attribute, so you have to revise your a element as follow as well: <div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>" data-id="<%=i %>">Modify</a></div>

After that, you could give a class name for your td as follow:

<td class="TriggerCell">
<form name=f>

And revise the code in edit 1 as follow:

$(".TriggerCell").each(function () {
        var $TriggerCell = $(this);
        $TriggerCell.find(".Trigger_modi a").on("click", function(e){
            var tnp = $(this).attr("data-id");
    ....
Comments