jQuery在點擊時顯示/隱藏錯誤

我有一個顯示/隱藏正在工作的消息。有一個主題和消息。我需要它的工作，只有標題的onClick將顯示消息。當我點擊郵件的標題時，它會打開郵件，但當郵件打開時，如果我點擊該郵件，它將隱藏。因爲我將在郵件中包含一些鏈接，所以這不起作用。我只需要點擊標題即可顯示和隱藏信息。jQuery在點擊時顯示/隱藏錯誤

HTML/PHP代碼：

<div id="note_container"> 
    <div id='empty_msg' style="display:none;">You do not currently have any notifications in your <span id='box_type'>INBOX</span></div> 
    <!-- Content --> 
      <? 
      if(!empty($notes)): 
       foreach($notes as $box_type=>$notes_array): 

       if(!empty($notes_array)): 
        foreach($notes_array as $note): 

        $envelope_icon = ($note['opened']==1)?'icon_opened.jpg':'icon_closed.jpg'; 

      ?> 
      <div id="note_<?=$note['note_id']?>" class='hdr_active <?=$box_type?>_item'> 
      <input type="checkbox" name="notes_chk" value="<?=$note['note_id']?>" class="notes_chk" style="float:right;"/></label> 
      <div style='display:inline-block;' id='note_<?=$note['note_id']?>' class="note new_note hide"> 
       <img src="images/buttons/<?=$envelope_icon?>" id='note_indicator_<?=$note['note_id']?>' class="note_indicator" width="20" height="19" /> 
       <?=$note['subject']?> 
       <div id='note_details_<?=$note['note_id']?>' class="details" style="display: none"> 
        <p><?=$note['message']?></p> 
       </div> 
      </div> 
      </div> 
      <? 
        endforeach; 
       endif; 
       endforeach; 
      endif; 
      ?> 


</div><!-- END NOTE CONTAINER -->

jQuery代碼

$(".note").click(function(){  
    // get the search values 
    var id = $(this).attr('id') 
    var id_array = id.split('_') 
    var note_num = id_array[1] 

    if($(this).hasClass('hide')) 
    { 
     $(this).removeClass('hide').addClass('show') 
     $("#note_details_"+note_num).slideDown() 

     if($(this).hasClass('new_note')){ 

      var notes = [note_num] 
      $(this).removeClass('new_note') 
      $("#note_indicator_"+note_num).attr("src","images/buttons/icon_opened.jpg"); 

      $.ajax({ 
       type: "POST", 
       url: "ajax-redirect.php", 
       data: { type: 'markRead', notes: notes, page:'ajax.php' } 
       }).done(function(data) { 

        $(".notes_chk").removeAttr('checked') 

        if(data!=1) 
        { 
         alert("failed to update the system") 
         $("#note_indicator_"+note_num).attr("src","images/buttons/icon_closed.jpg"); 
        } 
       }) 



     } 
    } 
    else 
    { 
     $(this).removeClass('show').addClass('hide') 
     $("#note_details_"+note_num).slideUp() 
    } 

}) 
    $('#check-all').click(function(){ 
    $("input:checkbox").attr('checked', true); 
    }); 
    $('#uncheck-all').click(function(){ 
    $("input:checkbox").attr('checked', false); 
    }); 


})

來源

2014-06-12 user2706970

後，你的PHP執行後生成的標記。 –

因爲DIV與筆記類是消息的家長對其子女的任何事件都會冒泡到它，所以你需要以防止與event.stopPropagation().

我不能測試這段代碼（我沒有原始的HTML這樣做），但它應該代表需要做什麼：

$(".note").children().click(function(e) { 
     e.stopPropagation(); 
    });

您需要將click事件綁定到div的子級並使用note類防止冒泡。

來源

2014-06-12 14:51:02

非常感謝，它非常完美！ – user2706970

請閱讀jQuery文檔！對於這種情況，你可以使用本機的jQuery方法toggle

$("div.note").click(function(){ 
    $(this).toggle(); // or some other selector 
});

，或者是。注意鏈接

$("div.note").click(function(e){ 
     e.preventDefault(); 
     $(".your_block").toggle(); // or some other selector 
    });

來源

2014-06-12 14:58:48 RDK

jQuery在點擊時顯示/隱藏錯誤

回答

相關問題