Question

单击“Click Me”时，文本将变为选择菜单。更改选择菜单时，它会更新文本。

我需要做的最后一件事是如果选择菜单失去焦点（即单击选择菜单以外的其他内容），则还原为原始文本。我该怎么做？

谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<title>Select Clones</title>
<style type="text/css">
.hide {display:none;}
</style>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script type="text/javascript">

$(document).ready(function(){

    $('#add').click(function(){
        $('#my-table tbody').append($("#row-clone").clone(true).removeAttr('id'));
    })

    $("#my-table td.edit")
    .on("click", "span", function(){
        var $t    = $(this),
        $html = $t.parent(),
        role  = $t.text();
        $html.html($("#select-clone").clone(true).removeAttr('id').removeAttr('class').focus().blur(function() {alert('Handler for .blur() called.')}));
        //$html.html($("#select-clone").clone(true).removeAttr('id').removeAttr('class'));
    })
    .on("change", "select", function() {
        var $t = $(this),
        val   = $('<span>').html($t.find(':selected').html());
        $t.parent().html(val);
    });

    //$('#select-clone').blur(function() {alert('Handler for .blur() called.')});
    //$('#select-clone').focusout(function() {alert('Handler for .focusout() called.')});

});

</script>

</head>
<body>

<table id="my-table">
  <thead class="hide">
    <tr id="row-clone"><td></td><td class="edit"><span>Click Me</span></td></tr>
  </thead>
  <tbody>
    <tr><td></td><td class="edit"><span>Click Me</span></td></tr>
    <tr><td></td><td class="edit"><span>Click Me</span></td></tr>
    <tr><td></td><td class="edit"><span>Click Me</span></td></tr>
  </tbody>
</table>
<br />
<select id="select-clone" class="hide">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

<button id="add">Add</button>

</body>
</html>

Answer 1

使用$("td.edit select").focus();在显示时关注选择框，然后使用模糊事件：

$('#select-clone').blur(function () {
  $(this).hide();
});

选择菜单失去焦点

1 个答案: