jQuery 未在点击时切换 contenteditable 且 a/href 未禁用

Question

我无法切换属性 contenteditable。默认情况下，我在 HTML 代码中将其硬编码为 false，当我单击 #edit-button 时，它变为 false。但是当我再次点击它时，没有任何反应。 else 部分似乎从未被触发。

我也在尝试禁用每个 a/button href 但我在这件事上也没有成功。下面的 if 语句是否错误？

if ( $(this).is(':button') ) {
    $(this).attr('href', '#');
}

jQuery:

$('#edit-button').on('click', function() {
    $('section').each(function() {
        $(this).find('[contenteditable]').each(function() {
            if ( $(this).attr('contenteditable', false) ) {
                $(this).attr('contenteditable', true);
                $('#header').focus();
                if ( $(this).is(':button') ) {
                    $(this).attr('href', '#');
                }
            } else {
                $(this).attr('contenteditable', false);
            }
        });
    });
});

尝试通过 SO 进行搜索，但 Google 运气不佳。

感谢您的帮助。

Answer 1

您需要使用 removeAttr 函数。

$(this).removeAttr('contenteditable');

**instead of**

$(this).attr('contenteditable', false);

并且在检查属性的时候。您可以使用 as

var attr = $(this).attr('contenteditable');
if (typeof attr !== typeof undefined && attr !== false) {
  // Your existing code.
}

instead of 

if ( $(this).attr('contenteditable', false) ) {

// 您的完整代码如下：

$('#edit-button').on('click', function() {
   $('section').each(function() {
    $(this).find('[contenteditable]').each(function() {
        var attr = $(this).attr('contenteditable');
        if (typeof attr !== typeof undefined && attr !== false) {
            $(this).attr('contenteditable', true);
            $('#header').focus();
            if ( $(this).is(':button') ) {
                $(this).attr('href', '#');
            }
        } else {
            $(this).removeAttr('contenteditable');
        }
    });
  });
});

Answer 2

我认为对于 contenteditable，您必须将 "true" 和 "false" 设置为字符串。不像其他可以为空的属性。尝试设置

$(this).attr('contenteditable', 'true');

和 $(this).attr('contenteditable', 'false');

不是 100% 所有浏览器都一样，但试一试！

Answer 3

这是我做的：

<div contenteditable="true">The quick brown fox...</div>
<br/>
<a href="http://www.google.com/">Testing</a><br/>
<a href="http://www.google.com/">Testing</a><br/>
<a href="http://www.google.com/">Testing</a><br/>
<a href="http://www.google.com/">Testing</a><br/>
<a href="http://www.google.com/">Testing</a><br/>
<a href="http://www.google.com/">Testing</a><br/>
<br/>
<button class="disableToggle">Button</button>
<br/>
<button class="disableToggle">Button</button>
<br/>
<button class="disableToggle">Button</button>
<br/>
<br/>
<br/>
<button id="toggle">Toggle Edit</button>

$("#toggle").click(function () {
    if ($("div").attr("contenteditable") == "true") {
        $("div").attr("contenteditable", "false");
        $(".disableToggle").attr("disabled", "true");
        $("a").on("click", function(e){e.preventDefault();});
    } else {
        $("div").attr("contenteditable", "true");
        $(".disableToggle").removeAttr("disabled");
        $("a").off("click");
    }
});

Here is the JSFiddle demo

jQuery 未在点击时切换 contenteditable 且 a/href 未禁用

jQuery not toggling contenteditable on click and a/href not disabled

html

jquery

toggle

contenteditable