jQuery：加载innerHTML之后执行jQuery函数

时间：2018-08-28 17:14:39

标签： javascript jquery html

创建InnerHTML之后，我试图执行一个简单的单击功能，但是它不起作用。控制台中未显示任何内容。

$(document).ready(function() {
  var lorum = "Lorem ipsum dolor sit amet, leo nulla ipsum vivamus, augue tempor inceptos sed nam rhoncus. Rhoncus montes litora. Praesent ut ad ornare fusce posuere in, libero bibendum, et adipiscing. <a href='#' id='hue'> You can click here </a>";

  $('button').click(function() {
    $('#content').html(lorum);
  });

  $(function() {
    $('#hue').click(function() {
      $('#content-2').html(lorum);
    });
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <button>Generate</button> <br><br>
  <div id="content"></div>
  <div id="content-2"></div>

</body>

3 个答案:

答案 0 :(得分：0)

<body>
  <div class="main-content">
    <div class="nav"></div>
    <div class="main">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt tempus nisi, vitae finibus nunc pharetra quis. Quisque in vehicula nunc. Nullam nec velit sed mi posuere ultricies pellentesque quis nibh. Morbi consequat, dui at consequat
        rhoncus, neque nulla posuere odio, non dapibus velit urna in turpis. In feugiat massa orci, vitae scelerisque sem posuere ut.</p>
      <p>Phasellus porttitor diam metus. Suspendisse quis mi sollicitudin, lobortis orci eu, pharetra ex. Cras ex nibh, dapibus quis tortor a, placerat commodo lorem. Mauris sed sapien ligula. Praesent lobortis cursus varius. Donec vulputate pulvinar interdum.
        Suspendisse laoreet malesuada commodo.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt tempus nisi, vitae finibus nunc pharetra quis. Quisque in vehicula nunc. Nullam nec velit sed mi posuere ultricies pellentesque quis nibh. Morbi consequat, dui at consequat
        rhoncus, neque nulla posuere odio, non dapibus velit urna in turpis. In feugiat massa orci, vitae scelerisque sem posuere ut.</p>
      <p>Phasellus porttitor diam metus. Suspendisse quis mi sollicitudin, lobortis orci eu, pharetra ex. Cras ex nibh, dapibus quis tortor a, placerat commodo lorem. Mauris sed sapien ligula. Praesent lobortis cursus varius. Donec vulputate pulvinar interdum.
        Suspendisse laoreet malesuada commodo.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt tempus nisi, vitae finibus nunc pharetra quis. Quisque in vehicula nunc. Nullam nec velit sed mi posuere ultricies pellentesque quis nibh. Morbi consequat, dui at consequat
        rhoncus, neque nulla posuere odio, non dapibus velit urna in turpis. In feugiat massa orci, vitae scelerisque sem posuere ut.</p>
      <p>Phasellus porttitor diam metus. Suspendisse quis mi sollicitudin, lobortis orci eu, pharetra ex. Cras ex nibh, dapibus quis tortor a, placerat commodo lorem. Mauris sed sapien ligula. Praesent lobortis cursus varius. Donec vulputate pulvinar interdum.
        Suspendisse laoreet malesuada commodo.</p>

      <p>In hac habitasse platea dictumst. Maecenas et mauris nunc. Aliquam erat volutpat. Duis eu condimentum ipsum. Etiam a mattis ipsum, sit amet vestibulum felis. In fermentum purus augue, vitae interdum ante gravida non. In tincidunt risus vitae ligula
        dignissim pellentesque. Vivamus id est eget metus placerat euismod et nec diam. Integer luctus bibendum condimentum.</p>
      <p>Vestibulum pretium quis mauris id pellentesque. Donec placerat iaculis ex, ut porta dolor vestibulum ac. Phasellus nunc tellus, viverra vestibulum posuere eu, faucibus vitae ex. Aenean efficitur maximus nunc, at sagittis nunc mattis sed. Vivamus
        et magna vitae magna interdum sodales. Ut imperdiet lobortis consectetur.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt tempus nisi, vitae finibus nunc pharetra quis. Quisque in vehicula nunc. Nullam nec velit sed mi posuere ultricies pellentesque quis nibh. Morbi consequat, dui at consequat
        rhoncus, neque nulla posuere odio, non dapibus velit urna in turpis. In feugiat massa orci, vitae scelerisque sem posuere ut.</p>
      <p>Phasellus porttitor diam metus. Suspendisse quis mi sollicitudin, lobortis orci eu, pharetra ex. Cras ex nibh, dapibus quis tortor a, placerat commodo lorem. Mauris sed sapien ligula. Praesent lobortis cursus varius. Donec vulputate pulvinar interdum.
        Suspendisse laoreet malesuada commodo.</p>

      <p>In hac habitasse platea dictumst. Maecenas et mauris nunc. Aliquam erat volutpat. Duis eu condimentum ipsum. Etiam a mattis ipsum, sit amet vestibulum felis. In fermentum purus augue, vitae interdum ante gravida non. In tincidunt risus vitae ligula
        dignissim pellentesque. Vivamus id est eget metus placerat euismod et nec diam. Integer luctus bibendum condimentum.</p>
      <p>Vestibulum pretium quis mauris id pellentesque. Donec placerat iaculis ex, ut porta dolor vestibulum ac. Phasellus nunc tellus, viverra vestibulum posuere eu, faucibus vitae ex. Aenean efficitur maximus nunc, at sagittis nunc mattis sed. Vivamus
        etmagna vitae magna interdum sodales. Ut imperdiet lobortis consectetur.</p>
      <p>Vestibulum pretium quis mauris id pellentesque. Donec placerat iaculis ex, ut porta dolor vestibulum ac. Phasellus nunc tellus, viverra vestibulum posuere eu, faucibus vitae ex. Aenean efficitur maximus nunc, at sagittis nunc mattis sed. Vivamus
        etmagna vitae magna interdum sodales. Ut imperdiet lobortis consectetur.</p>
      <p>Vestibulum pretium quis mauris id pellentesque. Donec placerat iaculis ex, ut porta dolor vestibulum ac. Phasellus nunc tellus, viverra vestibulum posuere eu, faucibus vitae ex. Aenean efficitur maximus nunc, at sagittis nunc mattis sed. Vivamus
        etmagna vitae magna interdum sodales. Ut imperdiet lobortis consectetur.</p>
    </div>
    <div class="sidebar"></div>
  </div>
  <div class="footer"></div>
</body>
$(document).ready(function() {
  var lorum = "Lorem ipsum dolor sit amet, leo nulla ipsum vivamus, augue tempor inceptos sed nam rhoncus. Rhoncus montes litora. Praesent ut ad ornare fusce posuere in, libero bibendum, et adipiscing. <a href='#' id='hue'> You can click here </a>";
  $('button').click(function() {
    $('#content').html(lorum);
    $('#hue').click(function() {
      console.log("clicked a");
      $('#content2').html(lorum);
    });
  });
});

答案 1 :(得分：0)

我对您的代码进行了一些调整。

这是脚本：

xAxis: {
    categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
        'Information Technology', 'Administration'],
    tickmarkPlacement: 'on',
    lineWidth: 0,
        lineColor: '#FFF000'
},

yAxis: {
    gridLineInterpolation: 'polygon',
    lineWidth: 1,
    min: 0, 
        lineColor: '#FFF000'
},

点击 $(document).ready(function(){ var lorum = "Lorem ipsum dolor sit amet, leo nulla ipsum vivamus, augue tempor inceptos sed nam rhoncus. Rhoncus montes litora. Praesent ut ad ornare fusce posuere in, libero bibendum, et adipiscing. <a href='#' id='hue'> You can click here </a>"; $('button').click(function(){ $('#content').html(lorum); $('#hue').click(); //the trigger }); $(function() { $(document).on('click','#hue',function() { //the listener $('#content-2').html(lorum); }); }); 之后，您需要触发<button>才能被点击。

然后有一个#hue的事件单击侦听器。您需要使用jquery #hue方法，而不仅仅是on()，因为click()在DOM加载后不存在。

有关更多信息，请参考此链接。 http://api.jquery.com/on/

答案 2 :(得分：-2)

DelayedFromControllerMessage*  BaseWaveApplLayer:: prepareDelayedSM(const char * name, int lengthBits, t_channel channel, int priority, int rcvId,int serial,std::list<const char *>vehicleList ) {
DelayedFromControllerMessage* dsm =       new DelayedFromControllerMessage(name);

dsm->addBitLength(headerLength);
dsm->addBitLength(lengthBits);

switch (channel) {
    case type_SCH: dsm->setChannelNumber(Channels::SCH1); break; //will be rewritten at Mac1609_4 to actual Service Channel. This is just so no controlInfo is needed
    case type_CCH: dsm->setChannelNumber(Channels::CCH); break;
}

dsm->setPsid(0);
dsm->setPriority(priority);
dsm->setWsmVersion(1);
dsm->setTimestamp(simTime());
dsm->setSenderAddress(myId);
dsm->setRecipientAddress(rcvId);
dsm->setSenderPos(curPosition);
dsm->setSerial(serial);


int NS = 0;
std::list<const char *>::iterator itPD = vehicleList.begin();
const char * vPD;
int i0 = 0;
while(itPD != vehicleList.end()){
    vPD = *itPD;
    ++itPD;
    ++NS;
    dsm->setVehiclesListArraySize(NS);
    dsm->setVehiclesList(i0, vPD);
    ++i0;
    VLvar1.push_back(vPD);

}

if ((std::string)name == "beacon") {
    DBG << "Creating Beacon with Priority " << priority << " at Applayer at " << dsm->getTimestamp() << std::endl;
}
if ((std::string)name == "delayed") {
    DBG << "Creating Data with Priority " << priority << " at Applayer at " << dsm->getTimestamp() << std::endl;
}

return dsm;
}

只需将脚本替换为页眉

我将您的脚本移到标题部分

相关问题
最新问题