3

リンクとボタンを並べて配置しています。ユーザーがボタンをクリックすると、リンクのテキストが編集可能になります。

ここに画像の説明を入力

リンクのテキストを編集可能にするために jquery editInPlace を使用しています。リンクのテキストは編集可能になりますが、テキスト編集後にリンク プロパティを復元できません。ここに私のhtmlとjavasrcriptファイルがあります

デモ.js

1 $(document).ready(function(){                                                                                                                                                                       
 2     $("img.modifyButton").click(function(){                                                                                                                                                         
 3         $(this).prev().editInPlace({                                                                                                                                                                
 4             success: function(){                                                                                                                                                                    
 5                 $(this).unbind('.editInPlace');                                                                                                                                                     
 6                 $(this).unbind('click');                                                                                                                                                            
 7             },
 8             url:'Admin/p.inline_coupon_edit_frontend.php',
 9             text_size:55,
10             show_buttons: false,
11             params:"field=Title"
12         });
13 
14         $(this).prev().on('click', function(event)
15                 {
16                     event.preventDefault();
17                 });
18         $(this).prev().click();
19     });
20 
21 });

htmlファイル

16         <div class="crux">                                                                                                                                                                          
17           <a  href="www.google.com">title</a>                                                                                                                                                       
18           <img class="modifyButton" src="./editInPlace_files/modifyButton.png" alt="None" width="13" height="13">
19         </div>

コードの git リポジトリ: git clone https://github.com/VihaanVerma89/dummy.git

4

1 に答える 1