jQuery .html（）根本沒有設置html

-1

我有一個簡單的事情。當用戶點擊edit鏈接時，它會將前一個元素變爲input元素進行編輯，將edit變爲cancel。如果用戶決定不編輯，他可以點擊cancel，並且所有內容都應該恢復到初始狀態。jQuery .html（）根本沒有設置html

眼下，這是不工作：

$('.cancel').on('click', function() { 
    $(this).parent().html("<a href='#'>edit</a>"); 
});

HTML：

 <div class='photo-section'> 

      <div class='photo-head'> 
       <div class='photo-info'> 
        Photo Name : <span class='photo-name'>Work selfie</span> 
        <span class='title-edit'><a href='#'>edit</a></span> 
       </div> 
      </div> 

      <div class='photo'> 
       <img src='' alt='' title=''> 
      </div> 

      <div class='tag-section'> 
       <div class='tags'>Photo Tags: 
        <span>#code#coffee#late#night</span> 
        <span class="tags-edit"><a href="#" class="">edit</a></span> 
       </div> 
      </div> 

     </div>

CSS：

// JavaScript to handle photo operations 

$(document).ready(function() { 

    // show/hide edit option 
    $('.photo-info, .tags').hover(function() { 
     $(this).find('.title-edit > a, .tags-edit > a').addClass('visible'); 
    }, function() { 
     $(this).find('.title-edit > a, .tags-edit > a').removeClass('visible'); 
    }); 

    // show editable area 
    $('.title-edit, .tags-edit').on('click', function() { 
     edit(this); 
    }); 

}); 

function edit(elem) { 
    // change element into an input elemnt for editing 
    var $item = $(elem).prev(); 
    var text = $item.text(); 
    $item.html("<input type='text'>").find('input').attr('value', text); 

    // change edit to cancel if input element present 
    if ($('input').length) { 
     $item.next().html("<a href='#' class='cancel'>cancel</a>"); 
    } 

    // change cancel back to edit 
    if ($('.cancel').length) { 

     $('.cancel').on('click', function() { 
      $(this).parent().html("<a href='#'>edit</a>"); 
     }); 
    } 
}

結果：https://jsfiddle.net/hgwkxygz/6/ 任何幫助將是巨大的！

來源

2016-07-03 Robert Rocha

由於你的問題不是關於PHP，你應該用它的HTML輸出替換PHP代碼。 – Jocelyn

它確實有效，但之前的點擊處理程序會立即觸發並返回到取消鏈接。 – JJJ

在演示中，您正在尋找沒有以前兄弟的元素的'prev（）'。真的不清楚這個代碼應該做什麼。使用原始html來解決客戶端...不是PHP。我們不應該爲你解析你的服務器代碼 – charlietfl

這是一個非常常見的情況，在javascript中錯誤時間附加事件。其實你正在刪除並重新添加一個DOM元素。所以已經附加的.cancel事件不會在這個時候起作用。每次在單擊編輯按鈕後附加新的DOM元素時，您都必須在.cancel上編寫事件偵聽器。

基本上，它意味着每當你做.html（），你必須重新添加事件監聽器的點擊。

有多種方法可以解決這個問題。

1）創建一個函數，將DOM元素以及click事件附加到該DOM元素。僅在點擊事件時調用該功能。

2）做事件代表團。

3）不要刪除點擊事件上的DOM元素，而是隱藏和顯示元素，這樣你就不會丟失事件監聽器。

4）如果你真的要做刪除並重新添加DOM元素，那麼在我看來，最好的辦法是讓一類，在這裏你做出DOM元素，私下在類中添加事件偵聽器，並單擊事件只是創建該類的新實例。

您可以在網上詳細查看這些選項。

來源

2016-07-04 07:41:22

jQuery .html（）根本沒有設置html

回答

相關問題