내가 제목을 수정하기 위해 텍스트 입력하여 클릭 제목을 대체하기 위해 노력하고있어 텍스트 입력

Question

안녕과 미래의 제목을 교체,이 코드를 사용하고 있습니다 div는 다른 스크립트를 사용하여로드되므로 원래 페이지에 있지 않으므로 위임 메서드를 사용해야한다고 생각합니다.

<script src="jquery-1.10.2.min.js"> 
    $(document).ready(function(){ 
    $("#right").delegate("h2","click",function(){ 
     $("h2").css("background-color","pink"); 
    }); 
    }); 
</script> 

어떤 생각이 어떻게 텍스트 입력 태그로이 사업부의 제목을 교체 : 여기

내가 분홍색에 자사의 배경 색상을 설정하려면 사용하고 JQuery와 스크립트입니다? 입력 필드 외부를 클릭하면 데이터베이스에 수정 사항을 제출하는 방법을 알고 싶습니다. 고맙습니다.

Answer 1

에 당신이 input 요소로 h2 요소에 HTML을 교체해야 "갱신"제목있는 현재 제목으로 설정됩니다. 그런 다음 사용자가 해당 입력 상자를 클릭하면 AJAX 요청을 서버의 다른 사이트에 보내어 새 제목으로 데이터베이스를 업데이트하도록 리스너를 추가해야합니다. This code does the trick

$(function(){ 
    $('#right').on('click', 'h2', function(){ 
    var $h2 = $(this); 
    var old = $h2.html(); 

    if(/<input type="text"/.test(old)) 
     return; 

    $h2.html('<input type="text" value="' + old + '"/>') 
     .find('input') 
     .focus() 
     .on('blur', function(){ 
     var value = this.value; 
     $.post('/new_title.php', {title: value}) 
      .done(function(){ 
      $h2.html(value); 
      }) 
      .fail(function(){ 
      $h2.html(old); 
      alert('Could not update title'); 
      }); 
     }); 
    }); 
}); 

당신이 URL을 사용하면 설치 리스너에 $.post에 URL을 변경해야합니다. 예 리스너가 될 것 같은 :

new_title.php

<?php 

require('DB.class.php'); //Require your DB Class 

if($_POST && $_POST['title']){ 
    DB::updateTitle($_POST['title']); 
} 

?> 

Answer 2

달성하고자하는 바를 정확히 이해하고 있는지 확실하지 않습니다. 그러나 id가 "right"인 요소는 어디에서 왔습니까? 이 스크립트가 다른 스크립트에서로드 된 스크립트입니까? 이 경우, DIV의 컨텐츠를 교체하려면

$(document).ready(function(){ 
    $(document).on('click', '#right', function(){ 
     $("h2").css("background-color","pink"); 
    }) 
}); 

Answer 3

을 시도, 코드를 사용 : 위해

$('div').html('<input type="text" name="abc" />'); 

Answer 4

귀하의 HTML :

<h2 style="cursor:pointer;">Click Me</h2> 

귀하의 JS :

$("body").delegate("h2", "click", function() { 
    $(this).html('<input type="text" value="yourValue">').find('input').focus(); 

    $("input").focusout(function(){ 
      $("h2").html(this.value ); 
    }).click(function(e){ 
     e.stopPropagation(); 
     return true; 
    }); 
}); 

를 들어 당신이 사용할 수있는 귀하의 의견 제출 간단한 $ .ajax POST 요청을 ".focusout"함수 또는 Aust $. post code. 이것이 귀하의 선택입니다. 그냥 데이터를 보내십시오.

자세한 내용은 Demo을 참조하십시오.