jQuery的孩子附上删除编辑输入

得到比你所期望的可能是你的生日很好更多 - 但是这个脚本让你发疯... :(jQuery的孩子附上删除编辑输入

我有下面的代码：

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" src="../scripts/jquery-ui.min.js"></script> 
    </head> 
    <body> 
    <form id="form1" runat="server"> 
    <div> 
    <div id="id1" class="fragenMainDiv" style="width: 80%; margin: 0px;"> 
    <input type="button" id="id1_edit" class="editIcon" value="change"> 
    <span id="id1_Label" class="fragenLabel"> 
    <p> 
    <span style="margin-left:5px;"> 
    <b>something</b> 
    </span> 
    </p> 
    </span> 
    </div> 
    </div> 
    </form> 
    </body> 

    <script type="text/javascript"> 


    $(document).ready(function() { 
    showMain(); 
    }); 
    function showMain() { 

    $('.editIcon').css("cursor", "pointer").click(function() { 
    edit($(this).attr("id")); 
    }); 

    $('.editfinish').css("cursor", "pointer").click(function() { 
    editFinish($(this).attr("id")); 
    }); 
    } 

    function edit(idTemp) { 
    //alert(fragenidTemp); 
    var IdArray = idTemp.split("_"); 
    var Id = IdArray[0] 
    var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text(); 
    $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove(); 
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />"); 

    $('input[id|="input' + Id + '"]').val(inputValue); 
    $('.editIcon').hide(); 
    showMain(); 
    } 


    function editFinish(Id) { 
    var inhaltFrage = $('input[id|="input' + Id + '"]').val(); 
    $('.editIcon').show(); 
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove(); 
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove(); 
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>"); 

    showMain(); 
    } 

    </script> 

    </html>

什么，我想要的是反应像一个正常的输入字段输入字段 - 但价值的第一个（正确）变更后的形式显示了三次输入字段...

是否有人有想法？因为它是一个较大脚本的简明脚本，所以我需要函数的结构帮助:)

来源

2012-07-31 Michael Hanning

argghhh我终于找到它了。你不能在每次编辑和修改完成后使用show main。因为你正在堆叠几个相同的事件点击！代码肩看起来像这样：

function edit(idTemp) { 
    //alert(fragenidTemp); 
    var IdArray = idTemp.split("_"); 
    var Id = IdArray[0] 
    var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text(); 
    $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove(); 
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />"); 

    $('input[id|="input' + Id + '"]').val(inputValue); 
    $('.editIcon').hide(); 
    $('.editfinish').css("cursor", "pointer").click(function() { 
    editFinish($(this).attr("id")); 
    }); 
    } 


    function editFinish(Id) { 
    var inhaltFrage = $('input[id|="input' + Id + '"]').val(); 
    $('.editIcon').show(); 
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove(); 
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove(); 
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>"); }

希望你现在看到错误，如果不是我可以详细解释。

来源

2012-07-31 07:36:29 mrangry777

谢谢您的快速答复 - 我试图改变我的脚本......但它没有工作...我可以请你写下剧本吗？ – 2012-07-31 07:50:27

aaaah - 非常感谢:) – 2012-07-31 10:42:06

Micheal而不是投票你改变了正确的答案，并拿下我的代表点...不爽... – mrangry777 2012-07-31 13:24:40

HTML

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Test</title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="button" id="btn_change" value="Change" /> 
<span id="id1_Label" class="fragenLabel"> 
</span> 
<span id="id1_Input"> 
<input type="text" id="content1_edit" value="default-value" /> 
</span> 
</div> 
</form> 
</body> 
</html>

JAVASCRIPT

$(document).ready(function(){ 
    // Mostly this should be coming from database on page-load; 
    updateVal(); 

    $("#btn_change").click(function(){ 
     if($(this).val() == "Change") 
     { 
      editVal(); 
     } 
     else 
     { 
      updateVal(); 
     } 
    }) 
}); 

function editVal() 
{ 
    $("#id1_Label").hide(); 
    $("#id1_Input").show(); 
    $("#btn_change").val("Update"); 
} 

function updateVal() 
{ 
    $("#id1_Label").html($("#content1_edit").val()).show(); 
    $("#id1_Input").hide(); 
    $("#btn_change").val("Change"); 
}

捣鼓演示：http://jsfiddle.net/dharmavir/5yMZk/

来源

2012-07-31 10:09:57 Dharmavir

谢谢 - 这是有帮助:) – 2012-07-31 10:41:45

对不起 - 我是一个新手以stackoverflow ...但将来我会记住这一点 - 再次感谢你:) – 2012-07-31 12:29:35

jQuery的孩子附上删除编辑输入

回答

相关问题