使用javascript专注于动态元素

在我的HTML中，我使用for循环加载了一个未知元素表。每个元素都有一个与它关联的链接，并且还有一个textarea。我希望用户能够点击链接，然后重定向到关联的网址。这很好，但我也希望用户能够长按元素（这是一个图像），并能够编辑textarea，一旦它们离开textarea就会被保存。使用javascript专注于动态元素

我的问题是因为表中的每个元素都有相同的id/classname，我如何让我的javascript只集中在正确的textarea上？

我的代码...

<g:each in="${files}" var="d">   
      <a class = "file" href="${d.uniquelink}" ><image id = "fileIcon" src="${resource(dir: 'images', file: 'folderimg.png')}" width="100px" height="100px"/> 
       <textarea class="captionText" rows="1">${d.name}</textarea> 
      </a> 
     </g:each>

它载入不同的图像，不同的独特联系，默认情况下在textarea的每个图像名称的HTML表格。这很好....

现在我想要当用户长时间放在图像上它把重点放在该元素的texarea，所以它可以被编辑。

$('.file').mousedown(function() { 
      timeoutId = setTimeout(myFunction, 1000); 
     }).bind('mouseup mouseleave', function() { 
      clearTimeout(timeoutId); 
     });

这是我如何检查是否longpressed。

然后，我尝试了以下各种方法，但无济于事，我如何获得与longhold press相关联的textarea。

function myFunction(focused){ 
     //  var focusedElement = document.activeElement; 
     //  document.getElementsByClassName(".captionText").focus(); 
     // $(".captionText").focus(); 
     //  .focus(); 
      //window.alert(focusedElement.tagName); 
     }

会发生什么，它会关注表中的最后一个textarea，而不管点击哪个textarea。

在表中为每个<a>创建一个唯一的ID，例如从我的数据库创建一个唯一的ID是否是不好的做法？（请参阅我不希望用户能够看到与文件关联的唯一ID）

任何帮助将不胜感激。

来源

2016-03-19 hat_to_the_back

在jQuery事件处理程序中，this是事件发生的元素。这使得对其他特定元素实例的遍历相对简单。

你可以使用基于HTML next()显示

var timeoutId; 
$('.file').mousedown(function() { 
    var $textArea = $(this).next(); 
    timeoutId = setTimeout(function() { 
    myFunction($textArea); 
    }, 1000); 
}).bind('mouseup mouseleave', function() { 
    clearTimeout(timeoutId); 
}); 

function myFunction($textArea){ 
    $textArea.focus() 
}

来源

2016-03-19 18:19:17 charlietfl

对不起，这并不在所有的工作。我试图改变它来得到它的工作，但没有效果 –

它不会影响你textarea它然而进入功能 –

我不明白'超时'。这意味着您需要将鼠标按下一整秒 – charlietfl

var timeoutId; 
 
$('.file').mousedown(function() { 
 
    var $link = $(this); 
 
    var $textArea = $('.captionText', $link); 
 
    timeoutId = setTimeout(function() { 
 
    doFocus($textArea); 
 
    }, 1000); 
 
}).bind('mouseup mouseleave', function() { 
 
    clearTimeout(timeoutId); 
 
}); 
 

 

 
function doFocus($textArea){ 
 
    $textArea.focus(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<a class = "file" href="#" ><image id = "fileIcon" src="https://cdn4.iconfinder.com/data/icons/file-extensions-1/64/pdfs-64.png" width="100px" height="100px"/> 
 
    <textarea class="captionText" rows="1">First Text </textarea> 
 
</a> 
 

 
<br/> 
 
<a class = "file" href="#" ><image id = "fileIcon" src="https://cdn4.iconfinder.com/data/icons/file-extensions-1/64/jpgs-64.png" width="100px" height="100px"/> 
 
    <textarea class="captionText" rows="1">Second Text </textarea> 
 
</a>

来源

2016-03-20 01:23:05 JChap

使用javascript专注于动态元素

回答

相关问题