用文本輸入值隨時更改鏈接href屬性

我有一個輸入和一個鏈接。當用戶鍵入內容時，我需要更改鏈接的href值，如果還有一種方法可以檢測用戶是否在其中粘貼了某些內容，那麼這將會非常棒。用文本輸入值隨時更改鏈接href屬性

任何想法如何通過jQuery實現這一點？

<input type="text" id="my-input"> 
<a id="my-link" target="_blank" href="www.something.com/<!--input text here-->/something/"> 
Click me! 
</a>

我已經挖了起來：

//Somehow get the the input value if it has changed 

//Change the href attribute 
$("#my-link").attr("href", "//www.something.com/" + textFromInput +"/something/");

來源

2015-12-18 Solo

把你的代碼放在輸入的'change'事件中。 – Barmar

您可以複製粘貼我的代碼並將您的建議添加爲答案，以便我可以看到它的樣子嗎？謝謝。 – Solo

綁定事件處理程序是最基本的jQuery操作之一。請展示你的嘗試，然後我可以幫助你瞭解你做錯了什麼。 – Barmar

您應該使用keyup事件來處理輸入的即時

$('#my-input').keyup(
    function(){  
     var textFromInput = $("#my-input").val(); 
     $("#my-link").attr("href", "https://www.google.com?q=" + textFromInput); 
});

Check out this fiddle

您還可以使用change之一，但是當輸入字段的焦點將丟失，將火 - 這將是確定過，因爲你必須點擊鏈接以獲得效果（這意味着你將失去重心上輸入）

來源

2015-12-18 01:47:07

謝謝，這個作品完美。你有沒有什麼快速的提示如何使它在動態加載的內容上工作，就像它在Bootstrap工具提示內部一樣？ – Solo

動態加載內容的問題是，在加載之前無法綁定事件 - 顯然沒有什麼可以綁定 - 在舊的jQuery版本中，有[delegate（）]（http://api.jquery.com/delegate）方法取代了[on（）]（http://api.jquery.com/on/），可以處理像這樣的情況 –

'$（'＃my-input'）。on（'keyup'，function（）{休息是一樣的'沒有做這個伎倆出於某種原因，我想我必須挖掘工具提示文檔來找到正確的事件或其他事情。 – Solo

用文本輸入值隨時更改鏈接href屬性

回答

相關問題